Components

Slider

Slider is a control for selecting a value from a bounded linear range of values. Slider is built on a native `<input type="range">`, so it keeps standard keyboard support, focus behavior, and form participation.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

const ControlledSliderDemo = () => {
  const [value, setValue] = useState(50)
  return (
    <VStack spacing={16}>
      <Text>Controlled value: {value}</Text>
      <Slider
        aria-label="Controlled slider"
        value={value}
        onValueChange={setValue}
        min={0}
        max={100}
      />
    </VStack>
  )
}

Uncontrolled Usage

Preview unavailable for this example in the static docs build.

Show code

const UncontrolledSliderDemo = () => {
  return (
    <VStack spacing={16}>
      <Text>Uses browser-managed default value</Text>
      <Slider
        aria-label="Uncontrolled slider"
        defaultValue={35}
        min={0}
        max={100}
        step={5}
      />
    </VStack>
  )
}

Disabled State

Preview unavailable for this example in the static docs build.

Show code

const DisabledSliderDemo = () => {
  return (
    <VStack spacing={16}>
      <Text>Disabled slider</Text>
      <Slider
        aria-label="Disabled slider"
        defaultValue={65}
        min={0}
        max={100}
        disabled
      />
    </VStack>
  )
}

API

Prop	Type	Required	Description
`value`	`number`	No	The current value of the slider.
`defaultValue`	`number`	No	The initial value of the slider when uncontrolled.
`onValueChange`	`(value: number) => void`	No	Callback fired when the value changes.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	No	Native change event handler forwarded to the underlying input.
`min`	`number`	No	The minimum value of the slider. Default: `0`
`max`	`number`	No	The maximum value of the slider. Default: `100`
`step`	`number`	No	The step increment for the slider. Default: `1`
`disabled`	`boolean`	No	Whether the slider is disabled. Default: `false`

Inherits additional props from Omit< IBaseElementComponent<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'children' >.

Overview

Slider is a control for selecting a value from a bounded linear range of values. Slider is built on a native <input type="range">, so it keeps standard keyboard support, focus behavior, and form participation.

SwiftUI Correspondence: Similar to SwiftUI's Slider.

Uncontrolled Usage

Use defaultValue when the browser should own the current value after mount.

Notes

Slider supports controlled mode with value and onValueChange
Slider supports uncontrolled mode with defaultValue
Slider also forwards the native onChange event for web-native integrations
Slider supports min, max, step, and disabled
Slider participates in native form submission because it renders a real range input
Use Slider for continuous value selection

Best Practices

Range: Set appropriate min and max values
Step: Use step for discrete value selection
Feedback: Show the current value to the user when it matters
Accessibility: Provide a label through aria-label, aria-labelledby, or a visible label
Mobile: Test slider interaction on touch devices

Sheet

Sheet is a view that presents content as a modal sheet. Sheets slide up from the bottom of the screen and are commonly used for presenting forms, settings, or additional content. When `presentationStyle="fullScreen"`, the same component maps to SwiftUI's `.fullScreenCover()` mental model on the web.

Spacer

Spacer is a flexible space that expands along the major axis of its parent container. Spacer is used to push content apart and create flexible layouts.

Slider

Examples

API

Overview

Uncontrolled Usage

Notes

Best Practices

On this page