Top
Slider - Styling & Theming
Slider
To style and customize the appearance of <Slider />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <Slider /> className - note that this will not override the default <Slider /> className of zippy-react-toolkit-slider, but rather will be appended to the classes the component already has.
ClassNameDescription
zippy-react-toolkit-slider
This is the block className for all sliders. Always applied.
zippy-react-toolkit-slider--[ORIENTATION]-orientation
Applied with the value of orientation.
zippy-react-toolkit-slider--rtl
Applied rtl=true.
zippy-react-toolkit-slider--focus
Applied it has focus.
zippy-react-toolkit-slider--with-buttons
Applied when showButtons=true.
zippy-react-toolkit-slider__wrap
Applied on wrapper around ticks and track.
zippy-react-toolkit-slider__tooltip
Applied on the tooltip rendered when mouse is over.
zippy-react-toolkit-slider__tooltip--[ORIENTATION]-orientation
Applied on the tooltip rendered when mouse is over with the value of orientation
zippy-react-toolkit-slider__tick-wrap
Applied on ticks wrapper.
zippy-react-toolkit-slider__tick
Applied on ticks.
zippy-react-toolkit-slider__tick--[TYPE]
Applied on ticks, type can be small or big.
zippy-react-toolkit-slider__tick--start-value
Applied on startValue tick.
zippy-react-toolkit-slider__tick--current-value
Applied on the tick that has its value equal with value.
zippy-react-toolkit-slider__tick--contained-value
Applied on the ticks that are contained inside value value range.
zippy-react-toolkit-slider__tick--end-value
Applied on endValue tick.
zippy-react-toolkit-slider__track
Applied on track.
zippy-react-toolkit-slider__track--focused
Applied on track when it has focus.
zippy-react-toolkit-slider__track-fill
Applied on track fill part.
zippy-react-toolkit-slider__track-fill--focused
Applied on track fill part when track has focus.
zippy-react-toolkit-slider__track-line
Applied on wrapper around track fill.
zippy-react-toolkit-slider__handle
Applied on drag handles.
zippy-react-toolkit-slider__active
Applied on drag handles when are dragged.
zippy-react-toolkit-slider__focused
Applied on drag handles when are focused.