[RFC] Slider Component

[anuraghazra]

Slider API RFC

Goal

Create an accessible, easy to use but still flexible enough slider component.

Following our renderlesskit slider component: renderlesskit/react slider

Components

• Slider - Main component
• Optional (only for flexiblity)
  • SliderTrack
  • SliderThumb
  • SliderThumbTooltip
  • SliderInput

Props

All the basic props from :- useSliderState

• defaultValue number | number[]

• tooltipContent React.ReactNode | (value: number | number[]) => JSX.Element

  Can be used to format tooltip content

• tooltipVisible boolean

  When tooltipVisible is true, Tooltip will show always, or tooltip will not show anyway, even if dragging or hovering.

• tooltipPlacement

• thumbContent React.ReactNode | (value: number | number[]) => JSX.Element

API

<Slider defaultValue={10} onChane={e => console.log(e)} />

Multi slider

Two values

<Slider defaultValue={[10, 20]} />

If defaultValues contains exactly two values we render this :-

More than two values

<Slider defaultValue={[10, 20, 30, 40]} />

If defaultValues contains more than two values we render this :-

Customization

Track

Customization of track can be done via the theme file

Thumb

To change the styles of the thumb users can use the theme file.

To change the thumb content

<Slider thumbContent={<SomeIcon />} />

Showing values in thumb

<Slider thumbContent={value => <span>{value} %</span>} />

Tooltip content

Format tooltip text

const tooltipFormatter = value => `${value}$`;

<Slider tooltipContent={tooltipFormatter} />;

Rendering react elements in tooltipContent

const tooltipFormatter = (value) => <span className="px-2">{value}</span>

<Slider tooltipContent={tooltipFormatter} />

Full customization

Users can do full customization through renderprops

<Slider>
  {state => (
    <>
      <SliderTrack />
      <SliderThumb>
        <VisuallyHidden>
          <SliderInput />
        </VisuallyHidden>
      </SliderThumb>
      <SliderThumbTooltip>Tooltip content</SliderThumbTooltip>
    </>
  )}
</Slider>

[navin-moorthy]

Merged #54