Welcome UI - Slider

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.

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

Examples

Add w and h to set size of shape.

Label & Hint

label and hint props to add some information to your slider.

Step

step prop allow you to snap to predefined sets of values.

tooltip prop to indicate the value being selected when dragging.

Disabled

disabled prop to indicate the value being selected when dragging.

Types

Slider

There is 3 differents types for slider: inline, left-field and right-field.

Range Slider

There is only 2 differents types for range slider: inline and fields.

Values

You can specify a range of values that will add a mark for each of them.

borderSelectorColor

To match your background color, you should add a borderSelectorColor.