Hit enter after type your search item

A jQuery touch / mouse slider (mobile friendly) with 3 demos

The responsive jQuery slider with touch and mouse

In other tutorials, I have covered quite a few sliders based on jQuery with different features. The built-in slider in jQuery UI, mouse enabled range slider with demos, and a rotating slider is also covered.

The plug-in covered in this tutorial is also based on jQuery, which is responsive (mobile friendly) and allows moving the slider by using the mouse as well as touch. The plug-in name is mouse-touch-range-slider that you may get from the link provided below.

(Credit: RichDeBourke)

The plug-in enables you creating a slider for selecting one value. It does not support dual slider like in above-mentioned tutorials.

A demo of simple jQuery slider

In this demo, the slider is created with a few plug-in options like minimum value, maximum value, an initial value of the slide etc.

The range is from 1 to 100 and the initial value set is 45. A textbox is used for displaying the current value of the slider. As you move left or right, it will change and display the current value. In pro apps, you may get that value and use to save in the database or whatever the case may be. For example, you may use it for salary expectation, age, or some other input field.

Have a look at the live demo:

jquery range slider

See online demo and code

Setting up this plug-in is quite simple. After downloading the plug-in from the above link, refer the JS file (jquery.mtRangeSlider.js) after the jQuery reference above the </body> closing tag.

The CSS file for styling the slider is placed in the <head> section:

<link href=”css/mtRangeSlider/mt-range-slider-basic.css” rel=”stylesheet” type=”text/css”>

You may get this by view source and save it in your system.

In the markup section, you need to use two input type = text fields. One acting as the slider while the other one showing the current value of the slider:

 


 

The script above the </body> closing tag:

  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js” type=”text/javascript”></script>

<script src=”js/mtRangeSlider/jquery.mtRangeSlider.js” type=”text/javascript”></script>

 


 

A demo of color picker by using slider plug-in

Following is a more advanced example of this plug-in where four sliders are used for choosing the color. The red, green and blue sliders and the last one is for picking the Hue’s value.

On the top, the text fields are showing the HEX value of the color along with RGB values in text fields. The <div> behind the text fields will show the color after setting the values for RGB and hue. Have a look:

jquery range slider color picker

See online demo and code

Get the complete code from the demo page.

This div height required for enabling the sticky sidebar