メインコンテンツまでスキップ

Slider

Customizable slider component.

Source

Import

import { 
Slider,
SliderThumb,
SliderTrack,
Scale,
ScaleOption
} from '@tremolo-ui/react'

Examples

Basic

Loading...
function App() {
  const [value, setValue] = useState(64)

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 8,
      }}
    >
      <Slider value={value} min={0} max={100} onChange={(v) => setValue(v)} />
      <span
        style={{
          width: '2rem',
        }}
      >
        {value}
      </span>
    </div>
  )
}