jQuery Simple Range Slider

January 04, 2020 No comments jQuery Plugin Range Slider

1. Introduction

jquery-simple-range-slider is a simple and easy to use jQuery plugin for range sliders. The plugin offers min and maximum range, and you can customize the look using CSS styles.

Jquery simple range slider

2. Plugin Overview

Library jquery-simple-range-slider
Author Malun
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.12.4 or Latest version

Demo

3. How to install and use jquery-simple-range-slider jQuery plugin

Follow the below steps to install jquery-simple-range-slider jQuery plugin on your website.

3.1. Load jQuery library and jquery-simple-range-slider JS file into head tag of your HTML document:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Range Slider Js -->
<script src="js/jquery.slider.js"></script>

3.2. Customize the CSS styles to your needs:

  .slider-wrap {
    position: relative;
    height: 30px;
    width: 80%;
    margin: 10px auto;
    padding-top: 10px;
  }
  .slider-handler {
    width: 10px;
    height: 20px;
    border-radius: 5px;
    box-shadow: 1px 1px 9px #09c, -1px -1px 9px #09c;
    background-color: #4df;
    position: absolute;
    left: 0;
    top: 5px;
  }

  .slider-range {
    background-color: #4df;
    border-radius: 5px;
    height: 10px;
  }

  .tt {
    width: 400px;
  }

3.3. Create DIV element with unique id:

<div class="range"></div>

3.4. Initialize the plugin in document ready function:

  $(function () {
    $('.range').slider({
      val: 0,
      min: 0,
      max: 100,
      onChange: function(e, val) {
        $(this).next('span').text(val);
      },
      onLoad: function(e, val) {
        $(this).next('span').text(val);
      }
    });

    setTimeout(()=>{
      $('.tt').slider('setVal', 18);
    }, 1000)
  });

4. Conclusion

In this article, we presented jquery-simple-range-slider jQuery plugin for creating simple range sliders. The slider component is widely used by developers to filter results by the specific numeric parameter like for example price. jquery-simple-range-slider is simple to install and can be adapted to any website using custom CSS styles.

{{ message }}

{{ 'Comments are closed.' | trans }}