❤
npm
Sign UpSign In

jq-button-range-slider

1.0.2 • Public • Published

Features

  • Full Responsive.
  • Scales with its container.
  • String and Interger type value support
  • Supports touch-devices (iPhone, iPad, Nexus, etc.).
  • Fully customisable

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

Readme

Keywords

Package Sidebar

Install

npm i jq-button-range-slider

Repository

github.com/jq-button-range-slider/jq-button-range-slider

Homepage

mohandere.github.io/jq-button-range-slider/

Weekly Downloads

4

Version

1.0.2

License

MIT

Last publish

Collaborators

  • mohandere
Try on RunKit
Report malware