Simple Range Slider Plugin for jQuery

Simple, easy to use range slider plugin for jQuery to handle number inputs. The plugin offers to handle minimum, maximum range of numbers and provide beautiful CSS styled slider to increase & decrease number range.


Plugin Overview

Plugin: jquery-simple-range-slider
Author: Malun
Licence: MIT Licence
Published: April 20, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.12.4 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 5 KB

How to Use Range Slider :

1. To getting started with range slider plugin, first of all load the jQuery and jquery.slider.js file into 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>

2. After that, create a container ( a div element ) with a unique id that will contains range slider.

<div class="myRange"></div>

3. Now, call the plugin in jQuery document ready function with that div’s id to active the slider.

$(document).ready(function(){
   $('#myRange').slider({
      val: 0,
      min: 0,
      max: 100,
   });
});

4. CSS styles to customize slider looking.

    .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;
    }

5. Full plugin configuration with default options and callback functions are as follows:

$(function () {
    $('#myRange').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)
  });

Be the first to comment

Leave a Reply

Your email address will not be published.


*