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.


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


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.


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.


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.


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

Related Links