Sliders

Overview

The sliders plugin replaces a text input with a slider input that is draggable, keyboard navigable, and scroll-wheel compatible. The slider can be used for numeric or text-based input.

Usage

To initiate the slider plugin, simply add the class slider to any input element. The default slider will display a range between 0-100 with an increment of 1. Custom ranges and increments can be introduced on a per-slider basis using data-attributes.

//A default slider
<input type="text" name="default" class="slider"/>

Options

The following options are all optional and can be added via data-attributes to the slider input.

Slider Options
Option Description Default Values
data-range The comma-separated min and max for a numeric slider. Do not use for non-numeric sliders. 0, 100 min, max
data-start The starting position of the slider knob. Integers for numeric sliders, the exact text for text sliders. 0 integer | string
data-increment The size of each step in the slider. 1 integer
data-options A list of comma-separated text values for the slider. none option1, option2, ...

Demos

Example Code
<form>
	<label for="numbers">Choose a number between 0-100 (default)</label>
	<input type="text" name="numbers" id="numbers" class="slider"/>				
	<label for="custom">Choose a number between 0-50 (custom)</label>
	<input type="text" name="custom" id="custom" class="slider" data-range="0,50" data-start="25" data-increment="5"/>			
	<label for="feelings">How do you feel?</label>
	<input type="text" name="feelings" id="feelings" class="slider" data-options="Horrible,Bad,Neutral,Good,Great" data-start="Neutral"/>					
</form>
Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.