{"id":1443,"date":"2016-05-01T07:56:17","date_gmt":"2016-05-01T07:56:17","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1443"},"modified":"2023-11-26T16:07:06","modified_gmt":"2023-11-26T16:07:06","slug":"5-demos-of-jquery-range-slider-by-using-a-plugin","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/5-demos-of-jquery-range-slider-by-using-a-plugin\/","title":{"rendered":"5 demos of jQuery range slider by using a plugin"},"content":{"rendered":"

The range slider<\/strong><\/h3>\n

To enhance the user experience if your website takes user input by way of web forms, adding the simple slider or range slider for required information can be good. For example, for selecting age group, salary range, or any other numeric requirement can be shown and selectable by way of visual selectors.<\/p>\n

In this tutorial, I am going to show you such a plug-in which is jQuery based and can be easily integrated into web pages. So, let me start with a few demos and a setting up guide on the way. (plug-in can be downloaded here<\/a>)<\/p>\n

A simple jQuery slider demo<\/strong><\/h3>\n

In this example, a simple slider is created by using the jRange plug-in. This slider can be used for a numeric value selection, for example, number of creditors, year of experience or some other. Have a look at the demo and setting up steps.<\/p>\n

\"jQuery<\/p>\n

Complete code:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<link href=\"css\/jquery.range.css\" rel=\"stylesheet\" type=\"text\/css\">\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"container\">\r\n<h3>A demo of jQuery slider<\/h3><br \/>\r\n<input class=\"simple-slider\" type=\"hidden\" value=\"25\"\/><br>\r\n\r\n<\/div>\r\n\r\n<script src=\"https:\/\/code.jquery.com\/jquery-1.11.1.min.js\"><\/script>\r\n<script src=\"js\/jrange\/jquery.range.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n        $(document).ready(function(){\r\n            $('.simple-slider').jRange({\r\n                from: 1,\r\n                to: 100,\r\n                step: 1,\r\n                scale: [5,25,50,75,100],\r\n                format: '%s',\r\n                width: 300,\r\n                showLabels: true\r\n            });\r\n \r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Follow these steps for setting up this plug-in on your web page.<\/p>\n
Step 1: <\/strong><\/p>\n
Include the jRange CSS file in the <head> section.<\/p>\n
<link href=”css\/jquery.range.css” rel=”stylesheet” type=”text\/css”><\/p><\/blockquote>\n
Step 2:<\/strong><\/p>\n
Write the markup where you simply need to create an input type hidden and assign it the class name which is referred in the <script> part. For example, I used the simple-slider<\/em> class name.<\/p>\n
<input class=”simple-slider” type=”hidden” value=”25″\/><\/p><\/blockquote>\n
Step 3:<\/strong><\/p>\n
Just above the <\/body> tag, place the jQuery library and plug-in JS file,:<\/p>\n
<script src=”js\/jrange\/jquery.range.js”><\/script><\/p><\/blockquote>\n
Step 4:<\/strong><\/p>\n
Finally, the code for initiating the slider with certain options. You may use many available options, a few of which I will use in coming examples.<\/p>\n
For example,<\/p>\n