Slider

Import

import { Slider } from "@sparrowengg/twigs-react";

Usage

Result

Loading...

Live EditorOpen in playground

<Slider
  defaultValue={[0]}
  min={0}
  max={100}
  labels={{
    left: "Min",
    right: "Max",
  }}
  labelPlacement="bottom"
/>

Range slider

The slider can be made a range slider by passing a second value to the defaultValue or value array.

Result

Loading...

Live EditorOpen in playground

<Slider
  defaultValue={[10, 20]}
  min={0}
  max={100}
  labels={{
    left: "Min",
    right: "Max",
  }}
  labelPlacement="bottom"
  components={{
    ThumbLeft: () => (
      <SliderThumb
        css={{
          borderRadius: 0,
          backgroundColor: "$negative900",
        }}
      ></SliderThumb>
    ),
    ThumbRight: () => (
      <SliderThumb
        css={{
          backgroundColor: "$black900",
          borderRadius: 0,
        }}
      ></SliderThumb>
    ),
  }}
/>

Customizing components

Track, Range and Thumb can be customized by using the components property. Make sure the custom component is wrapped by the corresponding default component as shown below

Result

Loading...

Live EditorOpen in playground

<Slider
  components={{
    Thumb: () => (
      <SliderThumb
        css={{
          backgroundColor: "$negative900",
          borderRadius: 0,
        }}
      />
    ),
    Track: ({ children }) => (
      <SliderTrack>
        <Box
          css={{
            width: "100%",
            height: "100%",
            background: "linear-gradient(to right, red, blue)",
            position: "absolute",
          }}
        />
        {children}
      </SliderTrack>
    ),
  }}
/>

The two thumbs can be customized by passing components to ThumbLeft and ThumbRight in components prop.

Props

Property	Description	Type	Default
defaultValue	Default value of slider. It should be an array	number[]
value	Controlled value for slider	number[]
min	Minimum value	number
max	Maximum value	number
labels	Customize left and right labels	{ left: string; right: string }
labelPlacement	Position of the left & right labels	'bottom' ǀ 'top'	'top'
components	Customize individual components	Record<Track ǀ Range ǀ Thumb ǀ ThumbLeft ǀ ThumbRight, ReactNode>