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
Docs for Material's slider web component
Bootstrap's range input documentation