Compose-slider NPM

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.