JSFiddle - React, Tailwind, and code Playground

by klyakh

HTML

<link rel="stylesheet" href="https://unpkg.com/material-components-web@8.0.0/dist/material-components-web.css">
<script src="https://unpkg.com/material-components-web@8.0.0/dist/material-components-web.js"></script>

<div class="mdc-slider">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb" role="slider" tabindex="0" aria-label="Continuous slider demo" aria-valuemin="0"
       aria-valuemax="100" aria-valuenow="50">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

JavaScript

const MDCSlider = mdc.slider.MDCSlider;

const slider = new MDCSlider(document.querySelector('.mdc-slider'));