Range Slider let the user select a range of values by moving the slider thumb. The smallest value is to the left, the largest to the right.
We have used noUISlider plugin as a reference which we have then customized based on our Propeller theme.
For more options and documentation, visit : noUISlider
Single Handle Horizontal Slider
A handle snaps to a clicked location. It can immediatly be moved, without a mouseup + mousedown. There are many different types of single handler slider such as default slider, slider with steps, slider with visible tooltip, slider with bottom visible tooltip, slider which can be disabled and slider with input value.
Single Handle slider : It allows user to select a value along a subjective range. It does not require a specific value to make adjustments, although it may, in some instances, offer an editable numeric value.
Single Handle Slider with steps
Single Handle slider with visible tooltip : Add
.pmd-range-tooltip to make the slider tooltip visible by default.
Single Handle slider with visible tooltip (bottom direction) : Add
.pmd-range-tooltip-bottom to make the slider tooltip visible in bottom direction by
Single Handle Slider which can be disabled.
Single Handle Slider which can be controlled by inputting values also.
Range slider are the ones with two handler. We can have range sliders of various types such as default range slider, range slider with visible tooltip, range slider whose both handlers can be disabled and range slider with input value.
Default range slider. Use
.pmd-range-slider to create the slider.
Range slider with visible tooltip. In order to make the tooltip visible, add
.pmd-range-tooltip to the slider.
Range slider with visible tooltip at the bottom. You can show tooltip at the bottom using
Range slider with lower tooltip at the bottom. You can show tooltip at the bottom using
Range slider with upper tooltip at the bottom. You can show tooltip at the bottom using
Ranger slider each of which's handler can be disabled.
Range Slider with value
Instead of horizontal slider we can also show the slider vertically. For vertical sliders also we can have slider with steps, slider with tooltip towards left or right.
Single Handle Vertical Slider.
Single Handle Vertical Slider with steps
Single Handle Vertical Slider with visible tooltip. Use
.pmd-range-tooltip for slider with visible tooltip.
Single Handle Vertical Slider with visible tooltip at right. Add right tooltip using
Verticle Range Slider
Vertical range slider is a slider with two handlers. We can have default slider or slider with visible tooltip. We can also have a slider with both tooltips in opposite direction to each other.
Default Vertical Range Slider
Vertical range slider with visible tooltip on left
Vertical range slider with lower handler tooltip towards right and upper handler tooltip towards left. Use
.pmd-range-tooltip-bottom-right to achieve this.
Vertical range slider with lower handler tooltip towards left and upper handler tooltip towards right. Use
.pmd-range-tooltip-top-right for this.