Slider Examples

The examples below assume that you have imported the component and set up the theme.

Slider Basic

Set the value in markup, show a tooltip through the tooltip slot, and add markers with a slotted datalist. reversed flips the value direction, while disabled and readonly prevent changes.

Normal:

Reversed:

With Tooltip:

With Markers:

Disabled:

Readonly:

<!-- eslint-disable html/use-baseline -->
<div class="slider-container">
  <label for="normal">Normal:</label>
  <sv-slider id="normal" value="25"></sv-slider>
</div>

<br />

<div class="slider-container">
  <label for="reversed">Reversed:</label>
  <sv-slider id="reversed" reversed value="25"></sv-slider>
</div>

<br />

<div class="slider-container">
  <label for="with-tooltip">With Tooltip:</label>
  <sv-slider id="with-tooltip" value="25">
    <span aria-hidden="true" data-value slot="tooltip"></span>
  </sv-slider>
</div>

<br />

<div class="slider-container">
  <label for="with-markers">With Markers:</label>
  <sv-slider id="with-markers" step="0.1" value="25">
    <datalist>
      <option label="low" value="25"></option>
      <option label="recommended" value="50"></option>
      <option label="high" value="75"></option>
    </datalist>
  </sv-slider>
</div>

<br />

<div class="slider-container">
  <label for="disabled">Disabled:</label>
  <sv-slider id="disabled" disabled value="25"></sv-slider>
</div>

<br />

<div class="slider-container">
  <label for="readonly">Readonly:</label>
  <sv-slider id="readonly" readonly value="25"></sv-slider>
</div>

<style>
  .slider-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-block-end: 1em;
  }
</style>

Slider Vertical

vertical turns the slider upright. Give it an explicit block size, it has none of its own.

Normal

With Tooltip

With Markers

<!-- eslint-disable html/use-baseline -->
<div class="vertical-container">
  <div>
    <label for="vertical-normal">Normal</label>
    <sv-slider id="vertical-normal" value="25" vertical></sv-slider>
  </div>

  <div>
    <label for="vertical-tooltip">With Tooltip</label>
    <sv-slider id="vertical-tooltip" value="25" vertical>
      <span aria-hidden="true" data-value slot="tooltip"></span>
    </sv-slider>
  </div>

  <div>
    <label for="vertical-markers">With Markers</label>
    <sv-slider id="vertical-markers" step="0.1" value="25" vertical>
      <datalist>
        <option label="low" value="25"></option>
        <option label="recommended" value="50"></option>
        <option label="high" value="75"></option>
      </datalist>
    </sv-slider>
  </div>
</div>

<style>
  .vertical-container {
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
    align-items: center;
    justify-content: space-evenly;

    > div {
      display: flex;
      flex-direction: column;
      gap: 1em;
      align-items: center;
    }

    sv-slider {
      min-block-size: 200px;
    }
  }
</style>

Slider Range

Provide an ordered value list in markup, or assign an array to the value property, with any number of thumbs. Give each thumb a stable label through its thumb-label-{n} slot. Tab moves between the thumbs, while the arrow keys adjust the focused one.

Range:

Minimum Maximum

Multiple Thumbs:

Low Mid High

<div class="range-container">
  <label for="range">Range:</label>
  <sv-slider id="range" value="25 75">
    <span slot="thumb-label-1">Minimum</span>
    <span slot="thumb-label-2">Maximum</span>
  </sv-slider>
</div>

<br />

<div class="range-container">
  <label for="multi-thumb">Multiple Thumbs:</label>
  <sv-slider id="multi-thumb" value="10 50 90">
    <span slot="thumb-label-1">Low</span>
    <span slot="thumb-label-2">Mid</span>
    <span slot="thumb-label-3">High</span>
  </sv-slider>
</div>

<style>
  .range-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-block-end: 1em;
  }
</style>

Slider Fill Origin

fill-origin fills the track between a chosen baseline and the current value instead of always starting at the minimum.

Neutral centered (baseline 0):

Custom baseline (50):

<div class="fill-origin-container">
  <label for="neutral-fill">Neutral centered (baseline 0):</label>
  <sv-slider id="neutral-fill" fill-origin="0" max="100" min="-100" value="25">
    <span aria-hidden="true" data-value slot="tooltip"></span>
  </sv-slider>
</div>

<br />

<div class="fill-origin-container">
  <label for="custom-baseline">Custom baseline (50):</label>
  <sv-slider id="custom-baseline" fill-origin="50" value="80">
    <span aria-hidden="true" data-value slot="tooltip"></span>
  </sv-slider>
</div>

<style>
  .fill-origin-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-block-end: 1em;
  }
</style>