Sandbox: JavaScript

A slider for controlling multiple elements. It allows control over what's modified (an element's value or html for example) and uses an extension of Number to alter the output value. If provided, it will also apply a class to the target after the slider fires the 'complete' and 'move' events.

NoteIf using the 'operators' feature, ensure that the structure is an Array of Objects, where the keys are strings and the values are Arrays:

      'operators': [
          {
            'string': ['array'] // because we are using .apply, the value must be an array even if it only has one member
          }
        ]
    

Example

Slider value raised to the 2nd power, and then humanized:
Slider value:
Slider multiplied by 7 (setting the html property is the default behavior):
<div class="slider full-width" data-behavior="Slider.Modify" data-slider-modify-options="
  'endRange': 286,
  'initialStep': 286,
  'steps': 285,
  'jumpstart': true,
  'targets': [
    {
      'selector': '!body #html-example',
      'property': 'html',
      'operators': [
        {'operate': ['pow', 2]},
        {'humanize': [{'decimalsLessThanBase': false}]}
      ],
      'completeClass': 'complete'
    },
    {
      'selector': '!body #value-example',
      'property': 'value'
    },
    {
      'selector': '!body #simple-operator',
      'operators': [{
        'operate': ['*', 7]
      }]
    }
  ]
">
  <div class="slider-fill "></div>
</div>
<div class="slider-knob"></div>
<div>
  Slider value raised to the 2nd power, and then humanized: <span id="html-example"></span>
</div>
<div>
  Slider value: <input id="value-example">
</div>
Slider multiplied by 7 (setting the html property is the default behavior): <span id="simple-operator"></span>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
knob String ~.slider-knob The part of the slider that is grabbed and slid around.
fill String ~.slider-fill The 'filled' part of the slider.
startRange Number 1 The value when the slider is all the way to the left.
endRange Number required The value when the slider is all the way to the right.
initialStep Number required Where the knob starts.
steps Number The number of divisions between the startRange and endRange numbers.
offset Number 0 Shifts the knob so that it is centered over the value on the slider. If used, it is generally set to half the width of the knob.
moveClass String The class applied to moveClassTargets upon the 'move' event.
moveClassTargets string Relative selector for objects to apply the moveClass to.
targets Array This is an Array of Objects. The Objects describe what element to target, which property to update, any modifications to the value and what class to apply to the target when the slider is done moving. [{'selector': '!body #someElement'}] will set the html property of the given element to the value of the slider. This is the minimal input for the 'targets' option. See the code examples above for more complex options.
jumpstart Boolean false If true, the slider will "jump" to where the user initially taps or puts the mouse down and allow them to continue dragging from there.
roundAfterSnap Number null If set, after the user completes their selection the slider will round up or down to the nearest multiple of the supplied value.
snap Boolean false `true` if you want the knob to snap to the nearest value.