https://github.com/domsleee/JQuery-Range-Slider

Yet another range slider class, uses jQuery
https://github.com/domsleee/JQuery-Range-Slider

Last synced: 12 days ago
JSON representation

Yet another range slider class, uses jQuery

• Host: GitHub
• URL: https://github.com/domsleee/JQuery-Range-Slider
• Owner: domsleee
• Created: 2016-08-31T04:40:57.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-06-08T14:16:04.000Z (over 5 years ago)
• Last Synced: 2024-10-30T03:42:44.671Z (13 days ago)
• Language: JavaScript
• Size: 24.4 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Range Slider

A JS & JQuery implementation of a range slider, inspired by Android's range sliders.

### ======= Live Demo =======





## Getting Started

Include JQuery and [relevant files](https://github.com/domsleee/JQuery-Range-Slider/tree/master/dist) in your html `` tag:

~~~html

~~~~

Make an appropriately sized `div` for the rangeslider within your html ``:

~~~html



~~~


Apply RangeSlider to a JQuery object within a script:

~~~JavaScript

var slider = new RangeSlider($("#slider_1"), {

  // Colours

  fgColour: "#04b404", // Foreground colour

  bgColour: "#ddd"   , // Background colour

  

  // Starting position

  percentage: 20,

	

  // Events - will run on touch & mouse triggers

  onDown: function(e, percentage) {

    console.log("Clicked at", percentage + "%");

  },

  onMove: function(e, percentage) {

    console.log("Moved to", percentage + "%");

  },

  onUp: function(e, percentage) {

    console.log("Slider control ended");

  }

});

~~~

## Library functions

The following functions can be called on the RangeSlider object after it has been initialised:

~~~JavaScript

// Disable the range slider

// This will disable slider movement and events

slider.disable();

// Enable the range slider

slider.enable();

// Change the position of the slider to 30%

slider.setPercentage(30);

~~~

## Development

Install all `npm` modules:

~~~bash

npm install .

~~~

This project uses grunt to minify the javascript and css files from `src/` and move them into `dist/rangeslider/`.

To build:

~~~bash

grunt

~~~

To build every time a script or stylesheet is changed:

~~~bash

grunt watch

~~~