Top
Slider - Ticks
Slider
Ticks are similar with the small lines on a ruler, and they are displayed along the <Slider />, perpendicular on the component itself.
Generated ticks versus custom ticks.Ticks can be auto generated or specified explicitly. The auto generation algorithm gets a few props that specify the distance between them and which ones have labels and which ones don't. The output of the algorithm is a set of objects like {type, value}[]. If you want to specify the ticks explicitly, they need to be specified in a similar fashion to the results of the auto generated values.
Ticks can be either big and small. The big ticks have labels attached to them, while thesmall ones don't. See the example below for an example on explicitly specifying the ticks.
In order to configure ticks, the following props are available:
  • tickLabels : Object[] - customize tick labels
  • tickStep : Number - space between big ticks. Used when you want to display auto-generated ticks.
  • smallTickStep : Number - space between small ticks. Used when you want to display auto-generated ticks.
  • skipEdgeTicks : Number - whether to render first and last tick. Used when you want to display auto-generated ticks.
  • ticks : {type: small|big, value: Number} - custom tick configuration
  • renderLabelContent : Fn(domProps, {tickValue}) - custom render function for tick labels. Called for all rendered ticks.
  • tickBarPosition : 'start'|'end'|'both'|'none' - position of tickbar relative to track. The values are not 'top'|'bottom\ since we also have vertical sliders, so'start'|'end' makes sense for both horizontal and vertical <Slider /> components.