menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Slider

MDUI's slider uses HTML5 <input type="range"/> The input box is implemented.

Call method

The slider component is automatically initialized after the page is loaded. For dynamically generated sliders, you need to call mdui.mutation() Initialize.

color

Use accent colors.

Related Reading

Material Design Guidelines: Components-Sliders

style

Continuous slider

codeplay_arrow
Example
<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100"/>
</label>

Intermittent slider

codeplay_arrow
Example
<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100"/>
</label>

Disabled state

In continuous slide or intermittent slide input Add on element disabled Attribute to disable the slider.

Continuous slider:

codeplay_arrow
Example
<!-- The default value is 0 -->
<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>

<!-- The default value is not 0 -->
<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>

Intermittent slider:

codeplay_arrow
Example
<!-- The default value is 0 -->
<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>

<!-- The default value is not 0 -->
<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>

Dynamically generated slider

If your slider component is dynamically generated, you need to call mdui.mutation() Initialize.

If you dynamically modify the value of the slider, you need to call mdui.updateSliders() Method to reinitialize the slider component. This method can accept a .mdui-slider The CSS selector of the class, or DOM element, or an array of DOM elements as a parameter, means that only the specified slider is reinitialized. If no parameters are passed in, all sliders on the page will be reinitialized.

List of CSS class names

Class name effect
.mdui-slider Define the slider component.
.mdui-slider-discrete Define the intermittent slider.
arrow_back Previous
Select control
arrow_forward Next
List
Set document theme

Theme color

Main color

Accent color