Slider

The Slider component is an interactive UI element that allows users to select a value from a continuous range. It typically consists of a track, thumb (or handle), and optional labels for indicating minimum and maximum values. Sliders are used for settings, adjustments, and filtering where users need to choose from a range of values. They enhance user experience by providing a visual and intuitive way to adjust parameters or make selections.

Source

Github

import type { RangeType } from 'welcome-ui/Slider'
import { Slider } from 'welcome-ui/Slider'

const Example = () => {
  const handleChange = (value: number) => {
    alert(value)
  }

  const handleChangeRange = (value: RangeType) => {
    alert(`${value.min} to ${value.max}`)
  }

  return (
    <>
      <Slider max={100} min={0} onChange={handleChange} value={50} />
      <Slider.Range max={100} min={0} onChange={handleChangeRange} value={{ max: 75, min: 25 }} />
    </>
  )
}

export default Example