Example of Tooltip in React Range Slider Component

All Controls
/
Range-slider
/
Tooltip

This sample demonstrates the rendering of Slider component with Ticks placement. Drag the thumb over the bar for selecting the values between min and max.

More Details...

Loading....
Description

The Ticks are the visual representation of the Slider values. The ticks are differentiated as small ticks and large ticks based on its size. The ticks position can be defined by the smallStep and largeStep properties.

In this demo, we have demonstrated Ticks position with Default and Range Slider.

  • Default Slider – In this sample, the small ticks and large ticks are rendered with the frequency of 0.05 and 0.20.
  • Range Slider – In this sample, the small ticks and large ticks are rendered with the frequency of 5 and 20.

We can also change the Ticks placement of Slider and Disable Slider component from the property pane.

We can use the below property to restrict the value range for the slider:

  • step - to define incremental/decremental step value for slider
  • min – to specify minimum value of the slider
  • max – to specify maximum value of the slider

The dragInterval is used to drag both handles using the range bar which is also applicable only to the range slider.

For more information, we can refer the ticks section from the documentation.