Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface SliderThumbOptions

remarks

@since 2.5.0

Hierarchy

Index

Properties

Optional animationDuration

animationDuration: number

The duration that it takes for the slider animation to complete for a new value. This is just used to help make things look smoother while dragging compared to jumping to new values.

Optional disabled

disabled: boolean

Boolean if the slider is disabled and the values cannot be changed.

Optional discrete

discrete: boolean

Boolean if the slider should act as a discrete slider which will render a tooltip above the thumb while dragging to visualize the current value for the slider.

Optional max

max: number

The max value for the slider.

Optional min

min: number

The min value for the slider.

Optional vertical

vertical: boolean

Boolean if the slider is rendered vertically instead of horizontally.

Methods

Optional getValueText

  • getValueText(value: number): string
  • A function that is used to help with accessibility by creating a better value string if just a number isn't representative enough of your range.

    Example:

    const [value, controls] = useSlider(0, {
      // format to be `$100`, etc
      getValueText: value => `$${value}`,
    });
    
    return <Slider baseId="price-slider" label="Price" {...controls} />;
    

    Parameters

    • value: number

    Returns string

Generated using TypeDoc