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

[Drm1804]

Всем доброго времени суток. Вопрос следующий Сейчас на странице ( так же она прикреплена в виде архива со всеми файлами и подключенными библиотеками) управление слайдером происходит путем нажатия на ссылку с классом 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]

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

[рони]

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 ) ;