Range Slider
Range Slider with Material Design UI
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
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 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.
Horizontal Slider with Steps
Horizontal Slider with Visible Tooltip
Add .pmd-range-tooltip
to make the slider tooltip visible by default.
Horizontal Slider with Bottom Tooltip
Add .pmd-range-tooltip-bottom
to make the slider tooltip visible in bottom direction by default.
Disable Horizontal Slider
Horizontal Slider with Value
Single Handle Slider which can be controlled by inputting values also. Wrap the input with a div containing class .range-slider-input
.
Range Slider
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.
Range Slider with Visible Tooltip
In order to make the tooltip visible, add .pmd-range-tooltip
to the slider.
Range Slider with Bottom Tooltip
You can show tooltip at the bottom using .pmd-range-tooltip-bottom
.
Range Slider with Lower Tooltip at Bottom
You can show tooltip at the bottom using .pmd-range-tooltip-left-bottom
.
Range Slider with Upper Tooltip at Bottom
You can show tooltip at the bottom using .pmd-range-tooltip-right-bottom
.
Disable Range Slider
You can disable single or both handles in a range slider.
Range Slider with Value
Single Handle Vertical Slider
Instead of horizontal slider we can also show the slider vertically.
Vertical Slider with Steps
Vertical Slider with Visible Tooltip
Use .pmd-range-tooltip
for slider with visible tooltip.
Vertical Slider with Tooltip on Right
Add right tooltip using .pmd-range-tooltip-right
Vertical 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.
Vertical Range Slider with Visible Tooltip
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 with Tooltip on Right
Add .pmd-range-tooltip-right
to show the tooltips on right.
Vertical Range Slider with Upper Handler 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 Upper Handler Tooltip on Right
Vertical range slider with lower handler tooltip towards left and upper handler tooltip towards right. Use .pmd-range-tooltip-top-right
for this.
Configuration Options
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 |