Slider

分类：

other

日期:

2022-2-06

标签：

chakra

The Slider is used to allow users to make selections from a range of values.

View sourceView theme source@chakra-ui/slider

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Import#

Chakra UI exports 5 components for Slider:

  • Slider: The wrapper that provides context and functionality for all children.
  • SliderTrack: The empty part of the slider that shows the track.
  • SliderFilledTrack: The filled part of the slider.
  • SliderThumb: The handle that's used to change the slider value.
  • SliderMark: The label or mark that shows names for specific slider values
import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  SliderMark,
} from '@chakra-ui/react';

Usage#

Note: We recommend adding a aria-label or aria-labelledby prop to provide an accessible label for the Slider.

<Slider aria-label="slider-ex-1" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Changing the slider color scheme#

<Slider aria-label="slider-ex-2" colorScheme="pink" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Changing the slider orientation#

<Slider
  aria-label="slider-ex-3"
  defaultValue={30}
  orientation="vertical"
  minH="32"
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Customizing the Slider#

Slider component was designed to be composed to make it easy for you to customize its styles.

<Slider aria-label="slider-ex-4" defaultValue={30}>
  <SliderTrack bg="red.100">
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb boxSize={6}>
    <Box color="tomato" as={MdGraphicEq} />
  </SliderThumb>
</Slider>

Discrete Sliders#

Discrete sliders allow you to snap to predefined sets of values. This can be accomplished using the step prop.

<Slider defaultValue={60} min={0} max={300} step={30}>
  <SliderTrack bg="red.100">
    <Box position="relative" right={10} />
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb boxSize={6} />
</Slider>

Slider with custom labels and marks#

You can have custom labels and marks by using SliderMark component

function SliderMarkExample() {
  const [sliderValue, setSliderValue] = useState(50);


  const labelStyles = {
    mt: '2',
    ml: '-2.5',
    fontSize: 'sm',
  };


  return (
    <Box pt={6} pb={2}>
      <Slider aria-label="slider-ex-6" onChange={val => setSliderValue(val)}>
        <SliderMark value={25} {...labelStyles}>
          25%
        </SliderMark>
        <SliderMark value={50} {...labelStyles}>
          50%
        </SliderMark>
        <SliderMark value={75} {...labelStyles}>
          75%
        </SliderMark>
        <SliderMark
          value={sliderValue}
          textAlign="center"
          bg="blue.500"
          color="white"
          mt="-10"
          ml="-5"
          w="12"
        >
          {sliderValue}%
        </SliderMark>
        <SliderTrack>
          <SliderFilledTrack />
        </SliderTrack>
        <SliderThumb />
      </Slider>
    </Box>
  );
}

And you can also use Tooltip with SliderThumb

function SliderThumbWithTooltip() {
  const [sliderValue, setSliderValue] = React.useState(5);
  const [showTooltip, setShowTooltip] = React.useState(false);
  return (
    <Slider
      id="slider"
      defaultValue={5}
      min={0}
      max={100}
      colorScheme="teal"
      onChange={v => setSliderValue(v)}
      onMouseEnter={() => setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
    >
      <SliderMark value={25} mt="1" ml="-2.5" fontSize="sm">
        25%
      </SliderMark>
      <SliderMark value={50} mt="1" ml="-2.5" fontSize="sm">
        50%
      </SliderMark>
      <SliderMark value={75} mt="1" ml="-2.5" fontSize="sm">
        75%
      </SliderMark>
      <SliderTrack>
        <SliderFilledTrack />
      </SliderTrack>
      <Tooltip
        hasArrow
        bg="teal.500"
        color="white"
        placement="top"
        isOpen={showTooltip}
        label={`${sliderValue}%`}
      >
        <SliderThumb />
      </Tooltip>
    </Slider>
  );
}

Getting the final value when dragging the slider#

Dragging the slider can trigger lots of updates and the user might only be interested in the final result after sliding is complete. You can use onChangeEnd for this.

<Slider aria-label="slider-ex-5" onChangeEnd={val => console.log(val)}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Configure thumb focus with focusThumbOnChange#

By default SliderThumb will receive focus whenever value changes. You can opt-out of this behavior by setting the value of focusThumbOnChange to false. This is normally used with a "controlled" slider value.

<Slider aria-label="slider-ex-5" value={value} focusThumbOnChange={false}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

useSlider#

We've exported the useSlider hook to help users manage and build custom slider UIs.

Props#

Slider Props#

The Slider component wraps all its children in the Box component, so you can pass all Box props to change its style.

aria-label

The static string to use used for `aria-label` if no visible label is used.

string

aria-labelledby

The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider

string

aria-valuetext

The static string to use used for `aria-valuetext`

string

colorScheme

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
"blue"

defaultValue

The initial value of the slider in uncontrolled mode

number

direction

The writing mode

"ltr" | "rtl"
"ltr"

focusThumbOnChange

If false, the slider handle will not capture focus when value changes.

boolean
true

getAriaValueText

Function that returns the `aria-valuetext` for screen readers. It is mostly used to generate a more human-readable representation of the value for assistive technologies

((value: number) => string)

id

The base id to use for the slider and its components

string

isDisabled

If true, the slider will be disabled

boolean

isReadOnly

If true, the slider will be in `read-only` state

boolean

isReversed

If true, the value will be incremented or decremented in reverse.

boolean

max

The maximum allowed value of the slider. Cannot be less than min.

number
100

min

The minimum allowed value of the slider. Cannot be greater than max.

number
0

name

The name attribute of the hidden input field. This is particularly useful in forms

string

onChange

Function called whenever the slider value changes (by dragging or clicking)

((value: number) => void)

onChangeEnd

Function called when the user is done selecting a new value (by dragging or clicking)

((value: number) => void)

onChangeStart

Function called when the user starts selecting a new value (by dragging or clicking)

((value: number) => void)

size

"lg" | "md" | "sm"
"md"

step

The step in which increments/decrements have to be made

number
1

value

The value of the slider in controlled mode

number

variant

Variants Slider

string

SliderThumb Props#

SliderThumb composes Box so you can pass all Box props to change its style.

SliderFilledTrack Props#

SliderFilledTrack composes Box so you can pass all Box props to change its style.

SliderTrack Props#

SliderTrack composes Box so you can pass all Box props to change its style.

footer logo

© 2022 Designed with chakra ui. Powered by contentlayerjs and nextjs etc. All rights reserved

TwitterYouTubeGithub