Скачать Итого: (24 руб./шт.) руб.
Ползунок
Контейнерdata-range-item='#id' - помечаем range item #id
data-range-min='#min' - минимальное значение (Обязательно)
data-range-max='#max' - максимальное значение (Обязательно)
data-range-start='#value' - стартовое значение (min по умолчанию)
data-range-shift='#value' - шаг (1 по умолчанию)
data-range-driven='#id' - помечаем ползунок как ответственный за range item c #id
При использовании ползунка он помечается классом active
Пример
<div class="manipulator" data-range-item="test_6" data-range-min="0" data-range-max="150">
<div class="driven" data-range-driven="test_6">
<span>Двигаюсь</span>
</div>
</div>
.section_2 .wrapper .content .example .example_test {
background: #eee;
padding: 20px;
margin-bottom: 15px !important;
}
.example_test_3_1 .slider_3_1 {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
cursor: grab;
}
.example_test_3_1 .slider_3_1 .item {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: skyblue;
font-size: 40px;
user-select: none;
transition: all 0.8s;
}
.description p, .example ul, .content .example p {
margin-bottom: 15px;
line-height: 1.2;
}
.example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{
margin: 0 !important;
}
.example_test_3_1 .info {
margin-top: 15px;
font-weight: bold;
}
.example_test_3_1 .control {
position: relative;
margin-top: 20px;
height: 25px;
}
.example_test_3_1 .control > div.prev {
left: 0;
}
.example_test_3_1 .control > div {
cursor: pointer;
padding: 5px;
background: #ccc;
width: max-content;
border-radius: 5px;
transition: all 0.3s;
user-select: none;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 25px;
width: 80px;
}
.example_test_3_1 .control > div.next {
left: 95px;
}
Примечание:
Инициализируем ползунок:
Двигаюсь
Показать CSS
Ползунку добавляется соответствующая позиция за счет стиля left, соответственно, он должен иметь позиционирование absolute, а контейнер - relative