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.
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
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
is equal to the number of steps displayed on the slider.
Two other optional attributes can be used on this variation. The
attribute will show small circles across the slider to indicate where the steps are located. The
attribute shows tooltips displaying the current value of the range slider when it is being used.
attribute to prevent users from interacting with the slider web component.
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.
attribute to the input element will disable the slider and prevent interaction.
Docs for Material's slider web component
Bootstrap's range input documentation