Range slider lets 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 base & customized it by applying material design principles to it.
For more options and documentation, visit : noUISlider
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 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.
Add .pmd-range-tooltip
to make the slider tooltip visible by default.
Add .pmd-range-tooltip-bottom
to make the slider tooltip visible in bottom direction by default.
Single Handle Slider which can be controlled by inputting values also. Wrap the input with a div containing class .range-slider-input
.
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.
Use .pmd-range-slider
to create the Propeller Range slider.
In order to make the tooltip visible, add .pmd-range-tooltip
to the slider.
You can show tooltip at the bottom using .pmd-range-tooltip-bottom
.
You can show tooltip at the bottom using .pmd-range-tooltip-left-bottom
.
You can show tooltip at the bottom using .pmd-range-tooltip-right-bottom
.
You can disable single or both handles in a range slider.
Instead of horizontal slider we can also show the slider vertically.
Use .pmd-range-tooltip
for slider with visible tooltip.
Add right tooltip using .pmd-range-tooltip-right
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.
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.
Add .pmd-range-tooltip-right
to show the tooltips on right.
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.
The Propeller CSS classes apply various predefined visual enhancements to the slider. The table lists the available classes and their effects.
Propeller Class | Effect | Remark |
---|---|---|
.pmd-range-slider |
Used to create the slider. | Required |
.pmd-range-tooltip |
Used to make the tooltip visible. | Optional |
.pmd-range-tooltip-bottom |
Used to make the tooltip visible at the bottom. | Optional |
.pmd-range-tooltip-right |
Use to make the tooltip visible at the right of the vertical slider. | Optional |
.pmd-range-tooltip-bottom-right |
Use to make the lower tooltip visible at the right of the vertical slider. | Optional |
.pmd-range-tooltip-top-right |
Use to make the upper tooltip visible at the right of the vertical slider. | Optional |
.pmd-range-tooltip-left-bottom |
Use to make the lower tooltip visible at the bottom of the horizontal slider. | Optional |
.pmd-range-tooltip-right-bottom |
Use to make the upper tooltip visible at the bottom of the horizontal slider. | Optional |