# Form Range

Range inputs allow users to use a slider bar to select a value from a range of values.

In Material Admin Pro, we have utilized range sliders from two different sources. First, we use the slider web component from the Material Design Web Components catalog, giving developers access to the fully functional Material Design range slider.

Second, we have restyled Bootstrap's default range slider to match Material Design's styling as closely as possible. This is for developers who prefer using the HTML range input element over a web component.

## Material Slider

The slider web component from the Material Web Components Catalog has a true Material Design stlying. By using the web component instead of HTML's default range input type, the functionality and user experience, especially on mobile, is drastically improved.

### Default

By default, the Material slider web component uses the primary coloring of the theme, and includes click, drag, and touch events.

In this example, the `.w-100` utility is being used to adjust the sliders width to fill the width of its parent element. The min, max, and value attributes are used to set the values of the range slider.

### Steps

Steps can be set within the slider web component using the `step='{value}'` attribute, where value is equal to the number of steps displayed on the slider.

Two other optional attributes can be used on this variation. The `markers` attribute will show small circles across the slider to indicate where the steps are located. The `pin` attribute shows tooltips displaying the current value of the range slider when it is being used.

### Disabled

Use the `disabled` attribute to prevent users from interacting with the slider web component.

## Bootstrap Range

The Bootstrap range component has been restyled to match Material Design specifications as closely as possible. Since this element is styled based off of browser defaults for the range input type, the component may not be perfectly consistent across browsers.

Using these range inputs however use the familiar HTML input markup, which may be preferrable to some developers.

### Default

By default, the Bootstrap range input is styled to appear as close as possible to Material guidelines. Only Edge Legacy and Firefox browsers support "filling" the slider track from the left hand side of the thumb.

### Steps

The default behavior of the range input type allows for steps. There is no visual feedback like in the web component example, but the slider does lock to each step rather than sliding smoothly.

### Disabled

Adding the `disabled` attribute to the input element will disable the slider and prevent interaction.

### Related Links

Material Slider Web Component Documentation

Docs for Material's slider web component

Related Link arrow_upward
Bootstrap Range Documentation

Bootstrap's range input documentation

Related Link arrow_upward