Develop

Elements

Track

<div class="tng-slider">
  <div class="tng-slider-track"></div>
</div>

Labels

<div class="tng-slider">
  <div class="tng-slider-labels">
    <div style="--tng-slider-label-value: 0.5">50%</div>
  </div>
  <div class="tng-slider-bar">
    <div class="tng-slider-track"></div>
    <div
      class="tng-slider-thumb"
      style="--tng-slider-thumb-value: 0.5"
    ></div>
  </div>
  <div class="tng-slider-labels">
    <div style="--tng-slider-label-value: 0">0%</div>
    <div style="--tng-slider-label-value: 0.5">50%</div>
    <div style="--tng-slider-label-value: 1">100%</div>
  </div>
</div>

50%

0%

50%

100%

Progress

<div class="tng-slider">
  <div class="tng-slider-bar">
    <div class="tng-slider-track"></div>
    <div
      class="tng-slider-progress"
      style="
        --tng-slider-progress-start: 0.5;
        --tng-slider-progress-end: 0.75;
      "
    ></div>
  </div>
</div>

Thumb

<div class="tng-slider">
  <div class="tng-slider-bar">
    <div class="tng-slider-track"></div>
    <div class="tng-slider-thumb"></div>
    <div
      class="tng-slider-thumb"
      style="--tng-slider-thumb-value: 0.25"
    ></div>
    <div
      class="tng-slider-thumb"
      style="--tng-slider-thumb-value: 0.5"
    ></div>
  </div>
</div>

Active

<div class="tng-slider">
  <div class="tng-slider-bar">
    <div class="tng-slider-track"></div>
    <div
      class="tng-slider-thumb is-active"
      style="--tng-slider-thumb-value: 0.5"
    ></div>
  </div>
</div>

Disabled

<div class="tng-slider">
  <div class="tng-slider-bar">
    <div class="tng-slider-track"></div>
    <div
      class="tng-slider-thumb is-disabled"
      style="--tng-slider-thumb-value: 0.5"
    ></div>
  </div>
</div>

Schemes

<div class="tng-slider">
  <div class="tng-slider-track"></div>
</div>

<div class="tng-slider is-ev">
  <div class="tng-slider-track"></div>
</div>

<div class="tng-slider is-range">
  <div class="tng-slider-track"></div>
</div>

<div class="tng-slider is-temperature">
  <div class="tng-slider-track"></div>
</div>

Range Input

Note

Chrome / WebKit doesn’t render a separate progress value element. You can render it however by setting --tng-slider-progress-value on the input and updating it dynamically with JavaScript.

<div class="tng-slider">
  <input style="--tng-slider-progress-value: 0.5" type="range" />
</div>

With datalist

A <datalist> linked via list / id provides snap-to-step behavior on the native range input. Hide it with .sr-only since rendering is inconsistent across browsers, and use a separate .tng-slider-labels div with role="presentation" for the visual labels.

<div class="tng-slider">
  <input
    list="slider-options"
    type="range"
    min="0"
    max="100"
    step="25"
  />
  <datalist class="sr-only" id="slider-options">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
  </datalist>
  <div class="tng-slider-labels" role="presentation">
    <div style="--tng-slider-label-value: 0">0%</div>
    <div style="--tng-slider-label-value: 0.25">25%</div>
    <div style="--tng-slider-label-value: 0.5">50%</div>
    <div style="--tng-slider-label-value: 0.75">75%</div>
    <div style="--tng-slider-label-value: 1">100%</div>
  </div>
</div>

0%

25%

50%

75%

100%

Disabled

<div class="tng-slider">
  <input disabled type="range" />
</div>