jq-button-range-slider
v1.0.2
Published
jQuery range slider plugin with buttons.
Downloads
10
Maintainers
mohandereReadme
Features
- Full Responsive.
- Scales with its container.
- String and Interger type value support
- Supports touch-devices (iPhone, iPad, Nexus, etc.).
- Fully customisable
Demo/Examples
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