Simple Range Slider Plugin for jQuery

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

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

Demo Download

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.