Slider

Sliders let users select from a range of values by moving the slider thumb.

Demos

Basic Usage

<mdc-slider> is a web component. All we need to do is put the required script into your HTML document. Then follow <mdc-slider>'s html structure and everything will be all set.

Required Script

<script async
        src="https://your-domain/pack-mdc-slider.js">        
</script>

Structure

Add <mdc-slider> in your document where you like. Attributes could help to change its default setting.

<mdc-slider
  name="mdc-slider-demo"
  min="0"
  max="100"
  step="10"
  value="0"
></mdc-slider>

JavaScript Instantiation

<mdc-slider> could also use JavaScript to create DOM element. Here comes some examples.

<script>
  var nodeAPI, nodeClasses;

  //use DOM api
  nodeAPI = document.createElement('mdc-slider');
  nodeAPI.name = 'mdc-slider-demo-nodeAPI';
  nodeAPI.min = 0;
  nodeAPI.max = 100;
  nodeAPI.step = 20;
  nodeAPI.value = 50;
  document.body.appendChild(nodeAPI);

  //new Classes
  nodeClasses = new MdcSlider();
  nodeClasses.name = 'mdc-slider-demo-nodeClasses';
  nodeClasses.min = 0;
  nodeClasses.max = 100;
  nodeClasses.step = 20;
  nodeClasses.value = 50;
  document.body.appendChild(nodeClasses);
</script>

Style Customization

<mdc-sider> uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style>
mdc-slider {
  --slider-theme: #018786;
  --slider-duration: .267s;
}
</style>

Variants

<mdc-slider> supports some common state to let it become more convenience & useful.

Layout: discrete

<mdc-slider> will display “pin” which current value when thumb draged. (demo)

<mdc-slider
  layout="discrete"
  name="mdc-slider-demo"
></mdc-slider>

Layout: discrete-markers

<mdc-slider> will display “pin” which current value when thumb draged. Track will list markers in this layout. (demo)

Note: need to set arrtibute - “step”

<mdc-slider
  layout="discrete-markers"
  step="20"
  name="mdc-slider-demo"
></mdc-slider>

Layout: nodisplay

<mdc-slider> will hide when this value set.

<mdc-slider
  layout="nodisplay"
  name="mdc-slider-demo"
></mdc-slider>

Properties

Event