Создание ползунка диапазона в HTML с помощью JavaScript

Ползунки диапазона используются на веб-страницах, чтобы позволить пользователю указать числовое значение, которое должно быть не меньше заданного значения и не больше другого заданного значения. То есть он позволяет выбирать значение из диапазона, представленного в виде ползунка.
Ползунок диапазона обычно представлен с помощью ползунка или элемента управления набором, а не текстового поля, такого как тип ввода «число». Он используется, когда точное числовое значение не требуется для ввода. Например, ползунок цены в меню фильтров списка товаров на flipkart.com

Создание ползунка диапазона

We can create a Range Slider using simple HTML and JavaScript by following the below steps:

Step 1:Creating an HTML element.
The slider element is defined in this step using the “div” element under which is a input field whose range is defined between 1 and 100.

Step 2:Adding CSS to the slider element.

1. Define the width of the outside container.

   .rangeslider{
       width: 50%;
       }
   

2. Define CSS for the slider like height, width, background, opacity etc for the slider.

   .myslider {
       -webkit-appearance: none;
       background: #FCF3CF  ;
       width: 50%;
       height: 20px;
       opacity: 2;
      }
   

3. Add Mouse hovering effects.

   .myslider:hover {
       opacity: 1;
   }
   

4. Add WebKit for browsers to change the default look of range sliders.

   .myslider::-webkit-slider-thumb {
       -webkit-appearance: none;
       cursor: pointer;
       background: #34495E  ;
       width: 5%;
       height: 20px;
   }
   

Step 3:Addition of JavaScript to the slider element.
Add the below JavaScript code to display the default slider value.

var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;

rangeslider.oninput = function() {
  output.innerHTML = this.value;
}

Step 4:Combine the above elements.

Output: