Compose Slider

Takes range inputs (sliders) and adds the features you wish they had.

Features:

• Custom values - More than numbers, creates and binds a hidden input to custom values
• Custom labels - Display labels adjacent to the slider, or update values anywhere on the page.
• Label prefixes/suffixes - Easily set units for labels.
• Line labels - Label increments with whatever values you want.
• Line marks - Add emphasis to any point(s) in your slider track.

Some things to note:

• All input type="range" elements will be converted into sliders.

Usage

All properties are set using data- attributes and are impmenented with unobtrusive javascript.

Attribute	Description	Example
name	Name attribute for hidden input (values set by slider)	name="rating"
data-values	Set custom values for a hidden input	1,4,8,15,16,23,42
data-label	Label array for displaying labels. Defaults to value or data-value. To disable: data-label='false'.	data-label="Poor,Fair,Good,…"
data-label-[custom]	Add multiple labels.	data-label-price="10,20,…", data-label-plan="Bronze,Silver,…".
data-external-label-[custom]	An array of labels for displaying external to the slider.	data-external-label-price updates data-slider-label='price'
data-before-label	Set a label prefix	$
data-after-label	Set a label suffix	.00
data-before-label-[custom]	Set a label prefix for a custom label	data-before-label-price='$' data-before-label-plan='Plan: '
data-after-label-[custom]	Set a label suffix for a custom label	data-after-price-='.00 /month'
data-mark	Add a marker to highlight a slider segment (1 based index)	1,5,10
data-line-labels	Add labels inline on slider (1 based index)	data-line-labels="Bronze,Silver,Gold", data-line-labels="1:Bronze,2:Silver,3:Gold"
data-position-label	Add a classname to control position ('left' => '.align-left'), default: 'right'	left or right

Examples:

Simple: Add a label and suffix to a standard 0-100 range input

Use data-after-label='%' to add a suffix to the slider label.

<input type="range" min="0" max="100" data-after-label="%">

Custom value

Set custom values for an input.

<input type="range" data-input='rating' data-values="poor,fair,good,great">

This will:

• Create a new hidden input with name='rating'.
• Set the slider's attributes min="0" and max="3", so only four choices can be selected.
• Update the value on the hidden input to the corresponding value when the slider is changed.
• Display the custom value in the slider's label.

External labels only

To prevent a slider from having a label set data-label='false'. Then to display labels somewhere else on the page, use an external label. Here's an example.

<input type='range' name='rating'
  data-label='false'
  data-external-label-rating='poor,fair,good,great'>

<span data-slider-label='rating'></span>

This will:

• Update an input with name='rating' with values from 0-3.
• Update elements matching data-slider-label='rating' with poor,fair,good, or great

Use slider labels and external labels

Here's an example of a slider which ties units to price, displaying units on the slider and price elsewhere on the page.

<input type='range' name='units'
  data-values='1,3,5,7'
  data-before-label='scale: '
  data-external-label-price='$10,$30,$50,$70'
  data-after-label-price='/month'>

<span data-slider-label='price'></span>

This will:

• Display a label on the slider: scale: 1.
• Create a hidden input with name='scale' and set its value to 1.
• Find elements matching data-slider-label='price' and set its contents to: $10/month.

Track slider state changes

If a slider increases, decreases, or returns to its original value, it can update an element contents and data- attribute to describe the change.

<span data-track-slider-state='#id-of-slider'></span>

If a slider is updated this element will be udpated as follows.

<span data-slider-state='initial' data-track-slider-state='#id-of-slider'></span>
<span data-slider-state='increased' data-track-slider-state='#id-of-slider'></span>
<span data-slider-state='decreased' data-track-slider-state='#id-of-slider'></span>

This is useful to change colors or hide and show content based on slider changes. For example.

[data-slider-state=increased] { color: green; }
[data-slider-state=decreased] { color: red; }