Multi Purpose Range Slider Plugin - jQuery r-slider

r-slider is a multi-purpose, highly customizable slider control plugin that helps users select a single value or a range of values in an elegant way.

Also can be used to create toggle switch, progress bar, step based form wizard with your own styles. Check out the examples in the zip for more information.

1. To get started, import jQuery library and the r-slider plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/r-slider.js"></script>

2. Create a new slider control on the webpage.

<div id="container"></div>

var mySlider = new slider({
    // container element
    container: "#container",
    // start/end values
    start: -100,
    end: 100,
    // custom step
    step: 1,
    // initial value
    value: 0
    
});

3. Apply your own CSS styles to the slider control.

#container .r-slider-line {
  background: #4b5459;
  border-radius: 4px;
}
#container .r-slider-fill {
  background: #4b5459;
}
#container .r-slider-button {
  box-shadow: inset 0 0 0 4px #c4c8cc;
  border-radius: 100%;
  text-align: center;
}
#container .r-slider-label {
  position: relative;
  top: 13px;
  font-size: 20px;
  color: #c4c8cc;
  z-index: 1000;
}
#container .r-slider-label:before {
  content: "";
  position: absolute;
  top: -13px;
  left: 5px;
  width: 30px;
  height: 30px;
  background: #4b5459;
  border-radius: 100%;
  z-index: -1;
}

4. Advanced usages.

var mySlider = new slider({
    // container element
    container: "#container",
    // start/end values
    start: -100,
    end: 100,
    // min/max values
    min: -50,
    max: 80,
    // custom step
    step: 1,
    // initial value
    value: 0,
    // shows value on drag
    showValue: true,
    // always shows value
    fixValue: true,
    // shows labels
    pinStep: 10,
    // custom label step
    labelStep: 40,
    // disables drag
    changable: false,
    // custom styles
    style: { 
      line_width: 0 
    },
    // for toggle switch
    text: ["ON", "OFF"],
    
    // callback
    ondrag: function(){}
});

This awesome jQuery plugin is developed by mohammadFeiz. For more Advanced Usages, please check the demo page or visit the official website.