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 default.

Single Handle Slider which can be disabled.

Single Handle Slider which can be controlled by inputting values also.

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.

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 .pmd-range-tooltip-bottom.

Range slider with lower tooltip at the bottom. You can show tooltip at the bottom using .pmd-range-tooltip-left-bottom.

Range slider with upper tooltip at the bottom. You can show tooltip at the bottom using .pmd-range-tooltip-right-bottom.

Ranger slider each of which's handler can be disabled.

Range Slider with value

Verticle Slider

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 .pmd-range-tooltip-right

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.

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