Skip to content
All 6 kits from $99 · Everything Bundle $149

Slider

InputMIT
View in Storybook

Range slider with draggable handle and configurable min/max/step.

bun add @otfdashkit/ui

Preview

Slider
Loading Storybook preview…

Code

import React from 'react'
import { Slider } from '@otfdashkit/ui'

export function Example() {
  const [value, setValue] = React.useState([50])
  return (
    <div className="w-64 space-y-4">
      <Slider defaultValue={[33]} max={100} step={1} />
      <Slider value={value} onValueChange={setValue} max={100} step={1} />
      <p className="text-sm text-[hsl(var(--muted-foreground))]">Value: {value[0]}</p>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.