Необходимо сделать range slider с использованием jquery

314

25 ноября 2017, 09:36

Вот такой дизайн.Два зеленых бегунка. Конечные точки - серые круги, под которыми label с максимальным и минимальным значением. Между бегунками заливка зеленым цветом. Хочется сделать его максимально просто без jquery_ui. И вообще как работают такие слайдеры. Читаю, но все как то не то. Хотелось бы найти how to step by step. Чтоб простенько и с нуля. Чтоб понять как возыметь ПОЛНУЮ власть над этим компонентом.Можно ли это сделать с использованием flexbox и dragable?

Answer 1

Можно и на чистом css сделать. Не используя javascript.

Стили не так как в вшей картинке. Это можете поменять на ваш вкус. А как это сделать можете посмотреть тут.

var slider = document.getElementById("myRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = slider.value; 
 
slider.oninput = function() { 
  output.innerHTML = this.value; 
}

#slidecontainer { 
    width: 100%; 
} 
 
/* The slider itself */ 
.slider { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 15px; 
    border-radius: 5px;    
    background: #d3d3d3; 
    outline: none; 
    opacity: 0.7; 
    -webkit-transition: .2s; 
    transition: opacity .2s; 
} 
 
.slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 25px; 
    height: 25px; 
    border-radius: 50%;  
    background: #4CAF50; 
    cursor: pointer; 
} 
 
.slider::-moz-range-thumb { 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    background: #4CAF50; 
    cursor: pointer; 
}

<div id="slidecontainer"> 
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> 
  <p>Value: <span id="demo"></span></p> 
</div>

Здесь использовал несколько строк javascript для того что бы под слайдером показало текущее значение.