trinhtanloc789 · October 23, 2019 01:12
diff --git a/index.html b/index.html
 <div class="container">
  <input type="range"/>
  <output data-output></output>
 </div>
diff --git a/rangeslider-pure-issue-boilerplate.markdown b/rangeslider-pure-issue-boilerplate.markdown
diff --git a/script.babel b/script.babel
 let tooltip;
 const slider = document.querySelector('[type="range"]');
 const output = document.querySelector('[data-output]');
 rangeSlider.create(slider, {onSlide: (val) => {
  console.log(val);
  output.textContent = val;
 }});
diff --git a/scripts b/scripts
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/range-slider.min.js"></script>
diff --git a/style.scss b/style.scss
 .container {
  margin-top: 80px;

  .rangeSlider {
    margin-bottom: 32px;
  }

  [data-output] {
    display: block;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
  }
 }
diff --git a/styles b/styles
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/range-slider.css" rel="stylesheet" />
	let tooltip;
	const slider = document.querySelector('[type="range"]');
	const output = document.querySelector('[data-output]');
	rangeSlider.create(slider, {onSlide: (val) => {
	console.log(val);
	output.textContent = val;
	}});