Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Slider

Draggable input for selecting numeric values within a range

## Example​

    import { cn, Slider } from "@databricks/appkit-ui/react"

    type SliderProps = React.ComponentProps<typeof Slider>

    export default function SliderExample({ className, ...props }: SliderProps) {
      return (
        <Slider
          defaultValue={[50]}
          max={100}
          step={1}
          className={cn("w-[60%]", className)}
          {...props}
        />
      )
    }

## Slider​

Draggable input for selecting numeric values within a range

Source: `packages/appkit-ui/src/react/ui/slider.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`name` | `string` |  | - | -
`disabled` | `boolean` |  | - | -
`orientation` | `enum` |  | - | -
`dir` | `enum` |  | - | -
`min` | `number` |  | - | -
`max` | `number` |  | - | -
`step` | `number` |  | - | -
`minStepsBetweenThumbs` | `number` |  | - | -
`value` | `number[]` |  | - | -
`defaultValue` | `number[]` |  | - | -
`onValueChange` | `((value: number[]) => void)` |  | - | -
`onValueCommit` | `((value: number[]) => void)` |  | - | -
`inverted` | `boolean` |  | - | -
`form` | `string` |  | - | -
`asChild` | `boolean` |  | - | -

### Usage​

    import { Slider } from '@databricks/appkit-ui';

    <Slider /* props */ />