Инициализируем ползунок с шагом в 10, установим стартовую позицию как 50, отобразим текущее значение в ползунке. Добавим input с контролем ввода:
Показать CSS
.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;
}
Примечание:
Ползунку добавляется соответствующая позиция за счет стиля left, соответственно, он должен иметь позиционирование absolute, а контейнер - relative