Управление Slick slider при помощи JQ.ui
 

Всем доброго времени суток. Вопрос следующий Сейчас на странице ( так же она прикреплена в виде архива со всеми файлами и подключенными библиотеками) управление слайдером происходит путем нажатия на ссылку с классом year. Но необходимо сделать переключение слайдов путем перетаскивания кольца. Для этого я добавил элемент из jq.ui (http://jqueryui.com/slider/#hotelrooms), но проблема в том, что у меня не получается связать слайдер и бегунок

Drm1804,
может это на какие мысли натолкнёт

slide: function( event, ui ) {
                        select[ 0 ].selectedIndex = ui.value - 1;
                        $('.ui-slider-handle').text(select[ 0 ].value)
                        $('#year'+ui.value).click()
                    }

и ниже скрипта

.ui-slider-handle {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #000;
    display: inline-block;
    font-size: 1.21em;
    height: 55px;
    margin: 0 18px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease 0s;
    width: 55px;
}

.ui-slider .ui-slider-handle {
    cursor: default;
    height: 50px;
    position: absolute;
    width: 50px;
    z-index: 2;
}

Спасибо большое, очень помогли, но тут возникла другая проблема.
При загрузке страницы В бегунке не отображается никакой даты. Но она появляется когда им начинаешь двигать, подскажите пожалуйста, как сделать, чтобы дата первого значения появлялась сразу после загрузки страницы (так же во вложении есть архив для удобства редактирования)

Drm1804,
продублировать slide в change и задать значение принудительно.

var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
                    min: 1,
                    max: 9,
                    range: "min",
                    value: 0,
                    slide: function( event, ui ) {
                        select[ 0 ].selectedIndex = ui.value - 1;
                        $('.ui-slider-handle').text(select[ 0 ].value)
                        $('#year'+ui.value).click()
                    },
                    change : function( event, ui ) {
                        select[ 0 ].selectedIndex = ui.value - 1;
                        $('.ui-slider-handle').text(select[ 0 ].value)
                        $('#year'+ui.value).click()
                    }
                });
                slider.slider( "value", 0 ) ;