Mobile friendly Range Slider Plugin With jQuery MT RangeSlider - Free Download Mobile-friendly Range Slider Plugin With jQuery - MT-RangeSlider

Free Download Mobile-friendly Range Slider Plugin With jQuery – MT-RangeSlider

Posted on

This time I will share jQuery Plugin and tutorial about Mobile-friendly Range Slider Plugin With jQuery – MT-RangeSlider, hope it will help you in programming stack.

Mobile friendly Range Slider Plugin With jQuery MT RangeSlider - Free Download Mobile-friendly Range Slider Plugin With jQuery - MT-RangeSlider
File Size: 60.7 KB
Views Total: 2832
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple yet powerful jQuery plugin that turns an input field into a customizable single- or multiple-range slider with support of both touch swipe and mouse drag support.

How to use it:

1. Load the jQuery MT-RangeSlider plugin’s stylesheet in the head section of the document.

1 <link href="mt-range-slider.css" rel="stylesheet">

2. Create a normal input field for the range slider.

1 <input type="text" id="slider" class="slider" value="" name="slider">

3. Load jQuery library and the jQuery MT-RangeSlider plugin’s script at the end of the document.

1 <script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
2 <script src="js/jquery.mtRangeSlider.js"></script>

4. Initialize the plugin to generate a basic range slider.

1 $(".slider").mtRangeSlider({
2   // options here
3 });

5. Default configuration options.

01 $(".slider").mtRangeSlider({
02  
03   // minimum value
04   min: 0,
05  
06   // maximum value
07   max: 100,
08  
09   // custom step
10   step: 1,
11  
12   // staring value
13   initialValue: 0,
14  
15   // enable keyboard keys
16   keyboard: true,
17  
18   // callbacks
19   onCreate: null,
20   onStart: null,
21   onChange: null,
22   onFinish: null
23    
24 });

6. Handle for positioning Slider.

1 sliderHandle = $("#slider").data("mtRangeSlider"),

7. Handle for getting SliderHandle values.

1 sliderElement = document.getElementById("slider"),

8. Handle for getting & setting the value for the input box.

1 inputValue = document.getElementById("red-value");

Changelog:

2021-01-02

  • Now using addEventListener

2019-05-10

  • Compatible with jQuery 3.4+

2016-09-11

  • Added mobile friendly styling

2016-06-30

  • update for jQuery 3.0+