syidaxdesign system
Home Pricing Settings
ComponentsInputs

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>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-slider>

Properties

Attribute / PropertyTypeDefaultDescription
number0Slider minimum value.
number100Slider maximum value.
number1Increment or decrement step size.
number0Current value or item identifier.
booleanfalseBlock user interaction and keyboard focus.
booleanfalseDisplay the current value while preventing edits.
'default' | 'always' | 'never''default'default shows the value during interaction; always keeps it visible; never keeps it hidden.
'top' | 'bottom' | 'right' | 'left''top'Placement of the value tooltip.
{ [key: number]: string }{}Object mapping tick values to display labels.

Pass objects and arrays as JavaScript properties.

booleanfalseHide tick labels.
booleanfalseSelect a range with two handles.
number[][]Array of start and end values. Also enable range to apply them to two handles.

Pass objects and arrays as JavaScript properties.

booleanfalseReverse the slider direction.
string''Label describing the item.
booleanfalseHide the selected range's fill color.
booleanfalseSnap the handle to specified tick positions.
booleanfalseArrange vertically.

Events

EventDetailDescription
CustomEvent<{ value?: number; min?: number; max?: number }>Fires whenever the slider value changes (drag, click, keyboard). detail = { value } for single mode, { min, max } for range mode.

Methods

MethodReturnsDescription
Promise<number | { min: number; max: number }>Return the current value or selected range.
Design SystemTab Navigate Enter Open