Slider

Drag handles to adjust a number or range intuitively.

<sy-slider>Installation guide Basic usage

Live preview

Interact with the component to see results here.

View code

HTML

<sy-slider
  value="40"
  min="0"
  max="100"
  step="5"
  showtooltip="always"
  label="Adjust value"
  id="sample"
  style="width:100%"
></sy-slider>

Usage guide

Use to adjust approximate values quickly, such as volume or brightness. Input Number is better for exact numeric entry.

One value

Set the range with min and max, and the increment with step.

A range between two values

Enable range and pass a two-value array to rangeValue to adjust both endpoints.

Examples

Marks and snap points

Show ticks with marks and align the handle to them with snapToMarks.

View code

HTML

<sy-slider
  value="25"
  snaptomarks
  showtooltip="always"
  label="Temperature"
  id="sample"
></sy-slider>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "marks": {
      "0": "Low",
      "25": "Medium",
      "50": "High",
      "100": "Maximum"
    }
  });
</script>

Range selection

Move each handle to set the start and end.

View code

HTML

<sy-slider
  range
  showtooltip="always"
  label="Price range"
  id="sample"
></sy-slider>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Read range</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "rangeValue": [
      20,
      80
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.getValue();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Vertical orientation

Give both the parent and the component enough height.

View code

HTML

<sy-slider
  vertical
  value="60"
  label="Volume"
  showtooltip="always"
  tooltipplacement="right"
  style="height:160px"
></sy-slider>

Disabled

Display the value while restricting interaction.

View code

HTML

<sy-slider
  value="40"
  disabled
  label="Locked value"
></sy-slider>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-slider
  value="40"
  min="0"
  max="100"
  step="5"
  showtooltip="always"
  label="Adjust value"
  id="sample"
  style="width:100%"
></sy-slider>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["changed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Marks and track fill

hideMarks hides mark labels, and hideTrackFill hides the selected range's fill. Dragging and keyboard adjustment remain available.

View code

HTML

<sy-slider
  value="40"
  min="0"
  max="100"
  step="5"
  showtooltip="always"
  hidemarks
  hidetrackfill
  label="Adjust value"
  id="sample"
  style="width:100%"
></sy-slider>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "hideMarks": true,
    "hideTrackFill": true
  });
</script>

Feature examples

Choose a feature from 20 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.