Slider

Stable

Range input control for selecting a numeric value.

Installation

npm install @xaui/native

Import

import { Slider } from '@xaui/native/slider'

Basic Usage

Minimal example showing the component with its default configuration.

import { Slider } from '@xaui/native/slider'

export function Example() {
  return <Slider />
}

Basic Slider

A slider with min, max, and a label.

import { Slider } from '@xaui/native/slider'

export function BasicExample() {
  return (
    <Slider
      label="Volume"
      minValue={0}
      maxValue={100}
      defaultValue={40}
    />
  )
}

Controlled Slider

Sync the slider value with external state.

import { useState } from 'react'
import { Slider } from '@xaui/native/slider'

export function ControlledExample() {
  const [value, setValue] = useState(50)

  return (
    <Slider
      label={`Brightness: ${value}%`}
      value={value}
      onChange={setValue}
      minValue={0}
      maxValue={100}
    />
  )
}

With Step Marks

Show visual marks for each step.

import { Slider } from '@xaui/native/slider'

export function StepMarksExample() {
  return (
    <Slider
      label="Quality"
      minValue={0}
      maxValue={4}
      step={1}
      showSteps
    />
  )
}