Slider

Slider for choosing one value or a range between two bounds.

Browsers: Chrome 123+Firefox 121+Safari 17.5+
Tier: 0
Bundle compressed: 465 B
Forced layout budget: 0 ms
Axe budget: 0
SSR compatible: Yes
Published contract: Test harness

Playground

Slider

Default slider

Volume: 40%

Controlled slider

Quality: 70%

Marked slider

Range slider

Vertical slider

Disabled slider

React

CSS

Tailwind

"use client";

import { useState } from "react";
import { Slider } from "@gunkin/uiify";
import { SliderClient } from "@gunkin/uiify/components/slider/client";

export default function Example() {
  const [volume, setVolume] = useState(40);
  const [value, setValue] = useState(70);

  return (
    <div>
      <label>
        <span>Volume: {volume}%</span>
        <Slider aria-label="Volume" className="" onValueChange={setVolume} value={volume} />
      </label>
      <label>
        <span>Quality: {value}%</span>
        <SliderClient
          aria-label="Quality"
          className=""
          marks={[
            { value: 0, label: "Draft" },
            { value: 25, label: "Standard" },
            { value: 70, label: "High" },
            { value: 100, label: "Ultra" },
          ]}
          max={100}
          min={0}
          onValueChange={(next) => {
            if (typeof next === "number") setValue(next);
          }}
          step={null}
          value={value}
        />
      </label>
    </div>
  );
}

/* Native controls stay visible until hydration; the client entry then adds a
   labeled track while retaining the real range inputs for input semantics. */

@layer components {
  [data-uiify-slider],
  [data-uiify-slider-client] {
    --uiify-slider-track-size: 0.375rem;
    --uiify-slider-track-radius: 999px;
    --uiify-slider-thumb-size: 1.125rem;
  }

  [data-uiify-slider] {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    max-inline-size: 22rem;
    min-inline-size: 14rem;
    min-block-size: 2.75rem;
    padding-inline: 0.5625rem;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
  }

  [data-uiify-slider]::-webkit-slider-runnable-track {
    block-size: var(--uiify-slider-track-size);
    border-radius: var(--uiify-slider-track-radius);
    background: linear-gradient(
      to right,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]::-webkit-slider-thumb {
    box-sizing: border-box;
    inline-size: var(--uiify-slider-thumb-size);
    block-size: var(--uiify-slider-thumb-size);
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    margin-block-start: calc((var(--uiify-slider-track-size) - var(--uiify-slider-thumb-size)) / 2);
    appearance: none;
  }

  [data-uiify-slider]::-moz-range-thumb {
    box-sizing: border-box;
    inline-size: var(--uiify-slider-thumb-size);
    block-size: var(--uiify-slider-thumb-size);
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }

  [data-uiify-slider]::-moz-range-track {
    block-size: var(--uiify-slider-track-size);
    border: 0;
    border-radius: var(--uiify-slider-track-radius);
    background: linear-gradient(
      to right,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]::-moz-range-progress {
    background: transparent;
  }

  [data-uiify-slider]:dir(rtl)::-webkit-slider-runnable-track {
    background-image: linear-gradient(
      to left,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]:dir(rtl)::-moz-range-track {
    background-image: linear-gradient(
      to left,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 0.25rem;
  }

  [data-uiify-slider]:disabled,
  [data-uiify-slider][data-disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  [data-uiify-slider-client] {
    position: relative;
    display: grid;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 22rem;
    min-inline-size: 14rem;
    min-block-size: 2.75rem;
    accent-color: var(--primary);
  }

  [data-uiify-slider-client] > input[data-part="thumb"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    accent-color: var(--primary);
    opacity: 0.001;
  }

  [data-uiify-slider-client] [data-part="track"] {
    position: absolute;
    display: block;
    inset-inline: 0.5625rem;
    inset-block-start: 50%;
    block-size: var(--uiify-slider-track-size);
    border-radius: var(--uiify-slider-track-radius);
    background: var(--muted);
    pointer-events: none;
    translate: 0 -50%;
  }

  [data-uiify-slider-client][data-enhanced][data-range] > input[data-part="thumb"]:first-of-type {
    clip-path: inset(0 calc(100% - var(--uiify-slider-middle)) 0 0);
  }

  [data-uiify-slider-client][data-enhanced][data-range] > input[data-part="thumb"]:last-of-type {
    clip-path: inset(0 0 0 var(--uiify-slider-middle));
  }

  [data-uiify-slider-client] [data-part="range"] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--uiify-slider-start);
    inline-size: calc(var(--uiify-slider-end) - var(--uiify-slider-start));
    border-radius: var(--uiify-slider-track-radius);
    background: var(--primary);
  }

  [data-uiify-slider-client] [data-part="mark"] {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(50% + 0.75rem);
    inset-inline-start: var(--uiify-slider-position);
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
    translate: -50% 0;
  }

  [data-uiify-slider-client] [data-part="mark"]::before {
    inline-size: 1px;
    block-size: 0.4rem;
    background: currentcolor;
    content: "";
  }

  [data-uiify-slider-client] [data-part="visual-thumb"] {
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inset-inline-start: var(--uiify-slider-position);
    inline-size: var(--uiify-slider-thumb-size);
    aspect-ratio: 1;
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    translate: -50% -50%;
  }

  [data-uiify-slider-client]:has(input:focus-visible) [data-part="track"] {
    outline: 3px solid var(--ring);
    outline-offset: 0.25rem;
  }

  [data-uiify-slider-client][data-disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  [data-uiify-slider-client][data-disabled] > input {
    cursor: not-allowed;
  }

  [data-uiify-slider-client][data-orientation="vertical"] {
    inline-size: 14rem;
    max-inline-size: none;
    block-size: 3rem;
    writing-mode: vertical-rl;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="track"] {
    inset-inline: 0.5625rem;
    inset-block: 50% auto;
    inline-size: auto;
    block-size: 0.375rem;
    translate: 50% 0;
  }

  [data-uiify-slider-client][data-enhanced][data-range][data-orientation="vertical"]
    > input[data-part="thumb"]:first-of-type {
    clip-path: inset(0 0 calc(100% - var(--uiify-slider-middle)) 0);
  }

  [data-uiify-slider-client][data-enhanced][data-range][data-orientation="vertical"]
    > input[data-part="thumb"]:last-of-type {
    clip-path: inset(var(--uiify-slider-middle) 0 0 0);
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="range"] {
    inset-block: 0;
    inset-inline: var(--uiify-slider-start) auto;
    inline-size: calc(var(--uiify-slider-end) - var(--uiify-slider-start));
    block-size: 100%;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="mark"] {
    inset-block-start: var(--uiify-slider-position);
    inset-inline: calc(50% + 0.75rem) auto;
    justify-items: start;
    writing-mode: horizontal-tb;
    translate: 0 -50%;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="mark"]::before {
    inline-size: 0.4rem;
    block-size: 1px;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="visual-thumb"] {
    inset-block-start: 50%;
    inset-inline-start: var(--uiify-slider-position);
    translate: 50% -50%;
  }
}

"use client";

import { useState } from "react";
import { Slider } from "@gunkin/uiify";
import { SliderClient } from "@gunkin/uiify/components/slider/client";

export default function Example() {
  const [volume, setVolume] = useState(40);
  const [value, setValue] = useState(70);

  return (
    <div>
      <label>
        <span>Volume: {volume}%</span>
        <Slider
          aria-label="Volume"
          className={
            "[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.1" +
            "25rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:2.75rem]" +
            " [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-runnable-t" +
            "rack]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-radius:var" +
            "(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient(to_right," +
            "var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] " +
            "[&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slider-thumb-si" +
            "ze)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[b" +
            "order:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-" +
            "primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-thumb]:[marg" +
            "in-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [&::-webkit" +
            "-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline-size:var(" +
            "--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-moz-" +
            "range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thu" +
            "mb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-track]:[block" +
            "-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:border-none " +
            "[&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:[backgroun" +
            "d:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-s" +
            "lider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slider-runnable" +
            "-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var" +
            "(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-image:line" +
            "ar-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-p" +
            "rogress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offset:0.25rem" +
            "] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:cursor-not" +
            "-allowed"
          }
          onValueChange={setVolume}
          value={volume}
        />
      </label>
      <label>
        <span>Quality: {value}%</span>
        <SliderClient
          aria-label="Quality"
          className={
            "[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.1" +
            "25rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:2.75rem]" +
            " [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-runnable-t" +
            "rack]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-radius:var" +
            "(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient(to_right," +
            "var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] " +
            "[&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slider-thumb-si" +
            "ze)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[b" +
            "order:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-" +
            "primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-thumb]:[marg" +
            "in-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [&::-webkit" +
            "-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline-size:var(" +
            "--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-moz-" +
            "range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thu" +
            "mb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-track]:[block" +
            "-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:border-none " +
            "[&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:[backgroun" +
            "d:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-s" +
            "lider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slider-runnable" +
            "-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var" +
            "(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-image:line" +
            "ar-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-p" +
            "rogress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offset:0.25rem" +
            "] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:cursor-not" +
            "-allowed"
          }
          marks={[
            { value: 0, label: "Draft" },
            { value: 25, label: "Standard" },
            { value: 70, label: "High" },
            { value: 100, label: "Ultra" },
          ]}
          max={100}
          min={0}
          onValueChange={(next) => {
            if (typeof next === "number") setValue(next);
          }}
          step={null}
          value={value}
        />
      </label>
    </div>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.125rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:2.75rem] [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-runnable-track]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[border:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-thumb]:[margin-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline-size:var(--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-track]:[block-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:border-none [&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:[background:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slider-runnable-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offset:0.25rem] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:cursor-not-allowed');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`Slider`

Prop	Type	Default	Description
`value`	`number`	—	Current value, making the slider controlled.
`defaultValue`	`number`	—	Starting value for the uncontrolled slider, which the native range input then owns.
`onValueChange`	`(value: number) => void`	—	Called with the new number whenever the slider moves.
`min`	`number`	`0`	Lowest selectable value.
`max`	`number`	`100`	Highest selectable value.
`step`	`number`	`1`	Increment between selectable values.
`disabled`	`boolean`	`false`	Disables the native input and sets the data-disabled attribute.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered element while keeping behavior and accessibility wiring.

`SliderClient`

Prop	Type	Default	Description
`value`	`number \| readonly [number, number]`	—	Controlled value; a tuple renders a lower and upper thumb.
`defaultValue`	`number \| readonly [number, number]`	—	Initial value for the native range input or two-thumb range.
`onValueChange`	`(value: number \| readonly [number, number]) => void`	—	Called when the selected value or ordered range changes.
`min`	`number`	`0`	Lowest selectable value.
`max`	`number`	`100`	Highest selectable value.
`step`	`number \| null`	`1`	Numeric step keeps native stepping before hydration; null restricts values to min, max, and marks after hydration.
`marks`	`readonly { value: number; label?: ReactNode }[]`	—	Tick labels and snap stops when step is null.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction for the control and its marks.
`thumbLabels`	`readonly [string, string]`	—	Accessible names for the lower and upper range thumbs.
`disabled`	`boolean`	`false`	Disables all native range inputs.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered element while keeping behavior and accessibility wiring.

Keyboard

Key	Action
`Arrow keys`	Adjust the focused native range input by one step or stop
`Home` / `End`	Move the focused thumb to the minimum or maximum
`Tab`	Move between the lower and upper range thumbs

Accessibility

Slider renders a native range input that works before hydration and with JavaScript disabled. SliderClient also server-renders native range inputs, then controls them after hydration for range values, labeled marks, and nonuniform snapping. Numeric step keeps native stepping before hydration; step={null} mark snapping starts after hydration. Give a single slider an aria-label or aria-labelledby; give both range thumbs thumbLabels.

Styling hooks

data-uiify-sliderdata-uiify-slider-clientdata-part="root"data-part="track"data-part="range"data-part="mark"data-part="thumb"data-orientationdata-disableddata-enhanced--uiify-slider-start--uiify-slider-end--uiify-slider-position

Framework

Style

Theme

Language

Slider

Playground

Slider

Default slider

Controlled slider

Marked slider

Range slider

Vertical slider

Disabled slider

API

`Slider`

`SliderClient`

Keyboard

Accessibility

Styling hooks