}
  • Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Essential JS 2
HOME
All Controls

Button

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.

DEMO
SOURCE
Placement
Disabled

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

In this demo, ticks position with default and range Slider is demonstrated.

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

The ticks placement of Slider and disable Slider component from the property pane can also be changed.

The following properties are used to restrict the value range for the slider:

  • step - defines incremental or decremental step value for slider
  • min – specifies minimum value of the slider
  • max – to specifies maximum value of the slider

For more information, refer to the ticks section from the documentation.