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

## 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