Range Slider

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.

Disable slider

Single Handle Slider which can be disabled.

Input Value

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.

Disable left handle Disable Right handle

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.