🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A fancy range slider control plugin that allows your user to select numeric values from a responsive, customizable and touch-friendly button group.

Range-Slider

Documentation

@npm

You can also download a plugin from npm.js site.

Features

  • Full Responsive.
  • String and Interger type value support
  • Supports touch-devices (iPhone, iPad, Nexus, etc.).
  • Fully customisable/ style as you want

Demo/Examples

alt text

JsFiddle Examples

Getting Started

Set up your HTML markup.

<div id="slider"></div>

Move the dist/jq-button-range-slider folder into your project


Add dist/jq-button-range-slider.css in your <head>

<link rel="stylesheet" type="text/css" href="dist/jq-button-range-slider.css"/>

or copy and paste the css from dist/jq-button-range-slider.css in your main file


Add jq-button-range-slider.js before your closing tag, after jQuery (requires jQuery 1.7 +)

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="dist/jq-button-range-slider.min.js"></script>

Initialize your slider in your script file or an inline script tag

//Initialize when document is ready $(document).ready(function(){  	var $slider = $("#slider"); 	$slider.jqButtonRangeSlider({ 		sliderOptions: [{ 			name: "Calcium", 			value: 20 		},{ 			name: "Carbon", 			value: 6 		},{ 			name: "Gold", 			value: 79 		},{ 			name: "Hydrogen", 			value: 1 		},{ 			name: "Mercury", 			value: 80 		},{ 			name: "	Oxygen", 			value: 8 		},{ 			name: "Zinc", 			value: 30 		},{ 			name: "Titanium", 			value: 22 		}] 	}).on("afterChange", function(e, ui) {  		$("#lb").text(ui.lb.value); 		$("#ub").text(ui.ub.value);  		//Fetch products within given range from server 		//Do ajax 	});  }); 

NOTE: I highly recommend putting your initialization script in an external JS file.

Settings

sliderOptions

Type: array

Default: []

Array of objects with name and value per slider option/button

Example:

[ 	{ 	  name: "WHITE", 	  value: "#FFFFFF" 	},{ 	  name: "BLACK", 	  value: "#000000" 	},{ 	  name: "RED", 	  value: "#FF0000" 	},{ 	  name: "YELLOW", 	  value: "#FFFF00" 	},{ 	  name: "GREEN", 	  value: "#008000" 	},{ 	  name: "BLUE", 	  value: "#0000FF" 	} ] 

template

Type: string

Default:

<% for (var i = 0; i < sliderOptions.length; i++) { %> 	<button type="button" class="yo-btn yo-range-btn" value="<%=sliderOptions[i].value%>"> 		<%=sliderOptions[i].name%> 	</button> <% } %> 

JavaScript micro template for rendering button html

More on JavaScript Micro-Templating


className

Type: string

Default: yo-button-range-slider

html class for slider

Events

Use them as shown below:

var $slider = $(".your-element"); // On change event $slider.on("afterChange", function(event, ui, slider){   console.log(ui); }); 

init

Arguments: slider

Fires after first initialization.


afterChange

Arguments: event, range, ui, slider

Fires after slider change

values Array of selected values

["#0000FF", "#FFFFFF"]

ui hash will look like -

{   lb: {     index: 2, //index of button at lower bound     value: "#FF0000"   },   ub: {     index: 5, //index of button at upper bound     value: "#000000"   } }; 

reset

Arguments: event, slider

Fires after slider reset to intial values.


destroy

Arguments: event, slider

When slider is destroyed.

Methods

Methods are called on JqButtonRangeSlider instances through the jqButtonRangeSlider method itself.

var $slider = $(".your-element");  // Reset slider $slider.jqButtonRangeSlider("reset");  //Set new range $slider.jqButtonRangeSlider("setRange", {   lb: 20,   ub: 50 }); 

destroy

Arguments: none

Destroy current slider


setRange

Arguments: ui

Set new range. ui will be like below with new range

{   "lb": "#FF0000",   "ub": "#FFFF00" } 

reset

Arguments: none

Reset current slider


Go Get It

Download Now

View on Github


You May Also Like