Как можно реализовать scrollbar в слайдере?

Question

[Elena Novodvorskaya]

Всем привет,


Стоит задача сделать слайдер с ползунком (как на картинке)

Накидала в CODEPEN
Как можно сделать такой scrollbar, так что бы при прокрутке левая сторона становилась цветной?

Спасибо всем тем кто откликнулся!!!!

Answer 1

[Сергей Горячев]

А это не оно?
demo.tutorialzine.com/2009/10/slick-content-slider...
followdesign.com/development/2011/11/19/jquery-kar...

Comments

[Elena Novodvorskaya]

demo.tutorialzine.com/2009/10/slick-content-slider...
Сам слайдер с ползунком это то что нужно, спасибо большое, теперь осталось понять как при перемещении закрашивать левую сторону у ползунка.

[SerzN1]

Elena Novodvorskaya: "frontend" :) - .sliderBtn.ui-draggable:before {
content: '';
display: block;
position: absolute;
width: 3000px;
height: 3px;
background: red;
right: 100%;
top: 50%;
} и для контейнера overflow:hidden.

[Elena Novodvorskaya]

SerzN1: что это?

[SerzN1]

Elena Novodvorskaya: это ответ на вопрос "как при перемещении закрашивать левую сторону у ползунка"

[Elena Novodvorskaya]

SerzN1: не получается

Answer 2

[Алекс Глебов]

Если не юзать готовые библиотеки

ползунок должен быть сделан версткой
перемещение ползунка на qjuery ui, в пределах родителя, только по горизонтали
professorweb.ru/my/javascript/jquery/level4/4_12.php

при окончании перемещения функция высчитывает процент положения ползунка(по координатам) от ширины родителя
процент передается другой функции, которая высчитывает на сколько надо проскролить в px и скролит.

Не знаю как ограничить width у слайдера что бы его длина равнялась длине по кол-ву li в нём;

.slider__list {display: flex}
.slider__item {flex-shrink: 0;}

Как можно сделать такой ползунок, так что бы при прокрутке становился цветным и обратно и что бы он был связан со слайдером.

элемент с абсолютным позиционированием, ширина равна % отклонения ползунка

Comments

[Elena Novodvorskaya]

что?)))