Sonos Suit

Basic

You can create a range slider bar using minimal markup.

<div class="range-slider" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

Advanced

Range slider also supports a disabled state.

<div class="range-slider disabled" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

Themes

The range slider also supports the Sonos brand colors with the addition of a simple class. Examples below.

<div class="range-slider play1" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider play3" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider play5" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider playbar" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider sub" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider connect-amp" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider connect" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider amber" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider light" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

<div class="range-slider dark" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

Fixed Steps

You can create a range slider with fixed steps by setting the steps variable in the data-options attribute. The configured number is the percentage the handle will move per step.

<div class="range-slider" data-slider data-options="step: 20;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

Custom Range

You can create a range slider with custom range by setting the start and end variables in the data-options attribute.

<div class="range-slider" data-slider data-options="start: 1; end: 10;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

Custom Starting Point

You can create a range slider with custom initial setting by adjusting the initial variable in the data-options attribute.

<div class="range-slider" data-slider data-options="start: 1; end: 10; initial: 9;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
</div>

Callbacks

There are two ways to bind callbacks to your sliders.

Callback Function

$(document).foundation({
  slider: {
    on_change: function() {
      // do something when the value changes
    }
  }
});

Events

$('[data-slider]').on('change.fndtn.slider', function() {
  // do something when the value changes
});

Getting & Setting Values

To get the value of a slider, get the value of its data-slider attribute.

$('#slider').attr('data-slider');

To set a slider's value, call the foundation function on the slider and pass in 'slider', 'set_value' and the new slider value as arguments.

var new_value = 3;
$('slider').foundation('slider', 'set_value', new_value);

Range Slider

This handy slider will allow you to drag a handle to select a specific value from a range.