Slider Basic

Use slider attributes and slots for orientation, fill origins, markers, tooltips, and states.

Normal:

Range:

Reversed:

Neutral-centered fill:

With Tooltip:

With Markers:

Disabled:

Readonly:

Vertical Sliders:

Normal

Range

Reversed

Neutral-centered fill

With Tooltip

With Markers

Readonly

Disabled

Code

The following example assumes that you have imported the component and set up the theme.

<!-- 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="range">Range:</label>
  <sv-slider id="range" value="25 75"></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="balance">Neutral-centered fill:</label>
  <sv-slider id="balance" fill-origin="0" max="100" min="-100" 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>

<br />

<h3>Vertical Sliders:</h3>

<br />

<div class="slider-container vertical">
  <div class="vertical-container">
    <label for="vertical-normal">Normal</label>
    <sv-slider id="vertical-normal" value="25" vertical></sv-slider>
  </div>

  <div class="vertical-container">
    <label for="vertical-range">Range</label>
    <sv-slider id="vertical-range" value="25 75" vertical></sv-slider>
  </div>

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

  <div class="vertical-container">
    <label for="vertical-balance">Neutral-centered fill</label>
    <sv-slider id="vertical-balance" fill-origin="0" max="100" min="-100" value="25" vertical></sv-slider>
  </div>

  <div class="vertical-container">
    <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 class="vertical-container">
    <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 class="vertical-container">
    <label for="vertical-readonly">Readonly</label>
    <sv-slider id="vertical-readonly" readonly value="25" vertical></sv-slider>
  </div>

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

<style>
22 collapsed lines
  .slider-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  .slider-container.vertical {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-evenly;

    .vertical-container {
      display: flex;
      flex-direction: column;
      gap: 1em;
      align-items: center;
    }

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