Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A precision HTML slider control
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
super_slider.css
super_slider.js
super_slider_demo.html

README.md

Super Slider

A super little HTML slider widget designed for accurate control of values.
Compatible with jQuery or Zepto.js frameworks.

Instructions

Super slider allows fine control of setting values by providing keyboard input to adjust the values in small increments as well as alt and shift key modifiers when dragging with the mouse.

  • Normal dragging will change the value based on the step parameter.
  • ALT + drag will change by 0.1x the step parameter.
  • The up and down arrow keys will change the value when the mouse is over the slider widget.
  • SHIFT + arrows will change by 10x the step factor.
  • ALT + arrows will change by 0.1x the step factor.
  • Clicking the label will reset to the default value.

Usage:

var slider = new SuperSlider(slider_id [, options])

Options:

var options = {
  slider_class   : 'ss_slider', // slider class name
  track_class    : 'ss_track',  // track class name
  handle_class   : 'ss_handle', // handle class name
  input_class    : 'ss_input',  // input class name
  label_class    : 'ss_label',  // label class name
  min            : 0,           // minimum value
  max            : 1,           // maximum value
  step           : 0.01,        // step increment
  default_value  : 0.5,         // default value
  decimal_places : 3,           // decimal place rounding
  label          : null,        // label
  name           : null         // input name attribute
};

Compatibility

Tested on Safari 5, Chrome 9, Firefox 3.6+ on Max OS X.

About

Created by Tom Beddard.
Released under the MIT license.

Something went wrong with that request. Please try again.