Slider

Slider is the primitive for picking a number from a continuous range: volume, sensitivity, brightness, and any “drag to set a value” control. It owns the value — clamping it to [min, max] and snapping it to step — and translates pointer drags and keyboard input on the track and thumb into value changes, so your component only renders the track, the filled range, and the thumb.

Reach for Slider when a control needs a single numeric value, drag interaction on a track, and predictable clamping and stepping without you doing the pointer math.

Import

import { Slider } from "@lattice-ui/slider";

Anatomy

Root, Track, and Thumb form the minimum useful slider. Range is optional but is the usual way to show the filled portion up to the current value.

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb />
  </Slider.Track>
</Slider.Root>

Example

A controlled volume slider from 0 to 100 in steps of 5, committing the value only when the drag ends.

import { useState } from "@rbxts/react";
import { Slider } from "@lattice-ui/slider";

export function VolumeSlider() {
  const [volume, setVolume] = useState(50);

  return (
    <Slider.Root
      value={volume}
      onValueChange={setVolume}
      onValueCommit={(value) => print(`committed: ${value}`)}
      min={0}
      max={100}
      step={5}
    >
      <Slider.Track>
        <frame
          BackgroundColor3={Color3.fromRGB(47, 53, 68)}
          BorderSizePixel={0}
          Size={UDim2.fromOffset(260, 10)}
        >
          <Slider.Range>
            <frame
              BackgroundColor3={Color3.fromRGB(86, 142, 255)}
              BorderSizePixel={0}
              Size={UDim2.fromScale(1, 1)}
            />
          </Slider.Range>

          <Slider.Thumb>
            <frame
              AnchorPoint={new Vector2(0.5, 0.5)}
              BackgroundColor3={Color3.fromRGB(235, 241, 250)}
              BorderSizePixel={0}
              Size={UDim2.fromOffset(16, 16)}
            />
          </Slider.Thumb>
        </frame>
      </Slider.Track>
    </Slider.Root>
  );
}

How it behaves

Value, clamping, and stepping

The value is a single number. Slider.Root is controllable via value/onValueChange, or uncontrolled via defaultValue (which itself defaults to min). Every value — incoming, dragged, or keyed — is clamped to [min, max] and snapped to the nearest multiple of step. min/max default to 0/100 and are normalized so the lower bound is always the smaller of the two; step defaults to 1.

Change vs. commit

onValueChange fires continuously as the value moves (every drag tick, every keypress). onValueCommit fires once at the end of an interaction — when a drag ends, or on a keyboard Return/Space — making it the right place to persist or send the final value over the network.

Dragging

A pointer press (MouseButton1 or Touch) on either Slider.Track or Slider.Thumb starts a drag and immediately jumps the value to the pressed position. While dragging, the root listens to UserInputService input changes and updates the value as the pointer moves, then commits on release. Touch drags are tracked per input object so multi-touch doesn’t cross wires. Drag listeners are cleaned up when the slider unmounts.

Keyboard adjustment

Slider.Thumb handles keyboard input when focused: arrow Right/Up increase and Left/Down decrease by step; PageUp/PageDown move by step * 10; Home/End jump to min/max. Each of these both changes and commits the value. Return/Space commits the current value without changing it.

Orientation

Set orientation to "horizontal" (default) or "vertical". It governs which pointer axis maps to the value, where the default track sizes itself, and how Slider.Range and Slider.Thumb position themselves — horizontally the range grows from the left and the thumb tracks left-to-right; vertically the range grows from the bottom and the thumb tracks bottom-to-top.

Motion

Slider.Range and Slider.Thumb animate toward their target position/size with a response recipe, using a slightly snappier settle while a drag is in progress so the handle stays under the pointer.

API reference

Slider.Root

Slider.Track

Slider.Range

Slider.Thumb

Related

• Controlled state
• Presence and motion
• Roblox UI constraints
• asChild composition