Range Slider

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.