❮ Foundation Tables Foundation Sidenav ❯

Foundation Slider

Foundation Slider allows users to select range values by dragging:

A slider can be created using <div class="range-slider" data-slider>`. Inside the `<div>`, add two `<span>` elements: `<span class="range-slider-handle"> creates the rectangular slider (blue background), and <span class="range-slider-active-segment"> is the gray bar behind the slider, representing the draggable area.

Note: The slider requires JavaScript. So you need to initialize Foundation JS:

Example

&lt;div class="range-slider" data-slider>
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>
<!-- Initialize Foundation JS -->
<script>
  $(document).ready(function() {
    $(document).foundation();
  });
</script>

Rounded and Disabled Sliders

Use the .radius and .round classes to add rounded corners to the slider. Use the .disabled class to disable the slider:

Example

&lt;div class="range-slider" data-slider>..</div>
&lt;div class="range-slider radius" data-slider>...</div>
&lt;div class="range-slider round" data-slider>...</div>
&lt;div class="range-slider disabled" data-slider>...</div>

Vertical Slider

Use the .vertical-range class and data-options="vertical: true;" to create a vertical slider:

Example

<div class="range-slider vertical-range" data-slider data-options="vertical: true;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>

Slider Value

By default, the slider is placed in the middle of the bar (value "50"). You can modify the default value by adding the data-options="initial: attribute:

Example

<div class="range-slider" data-slider data-options="initial: 80;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>

Displaying Slider Value

If we need to display the value in real-time while dragging the slider, we can add the data-options="display_selector:# attribute inside the <div> with the element ID matching the slider's ID, as shown in the example:

Example

<!-- Display the slider value in this span -->
<span id="mySlider"></span>
<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>

Combining Data Options

The following example uses both display_selector and initial data options:

Example

<span id="mySlider"></span>
<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 20;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>

Step Size

By default, the slider increments or decrements by "1". You can modify the step size by adding the data-options="step: attribute. The example sets it to 25:

Example

<span id="mySlider"></span>
<div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>

Custom Range

By default, the range values are from "0" to "100". You can set custom range values by adding data-options="start and end attributes. The example sets the range values from "1" to "20":

Example

<span id="mySlider"></span>
<div class="range-slider" data-slider data-options="display_selector: #mySlider; start: 1; end: 20;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>

Using Grid

The following example uses the slider within a grid:

Example

<div class="row">
  <div class="small-10 columns">
    <div class="range-slider" data-slider data-options="display_selector: #mySlider;">
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <!-- The display element (Tip: use CSS to perfectly position it) -->
    <span id="mySlider" style="display:block;margin-top:14px;"></span>
  </div>
</div>

Using Input

The following example uses <input> instead of <span> to display the slider's value:

Example

<div class="row">
  <div class="small-10 columns">
    <div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 72;">
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <!-- The display element (Tip: use CSS to perfectly position it) -->
    <input type="number" id="mySlider" style="margin-top:7px;" value="72">
  </div>
</div>

❮ Foundation Tables Foundation Sidenav ❯