JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<input class="lineHeight" type="range" min="-6" max="2">

SCSS

input[type="range"] {
  -webkit-appearance: none;
  height: 40px;
  width: 200px;
  background: none; // 清除不必要的東西
  outline: none; // 清除不必要的東西
  border-radius: 0; // 清除不必要的東西
  overflow: hidden; // 晚點會用到
  cursor: pointer;
  &::-webkit-slider-runnable-track {
    background-color: #ddd;
  }
  // 是能調整拖曳鈕的朋友
  &::-webkit-slider-thumb {
    -webkit-appearance: none; // 一樣要消除
    width: 20px;
    height: 40px;
    background-color: #fff;
    border: 2px solid #999;
    box-shadow: -100vw 0 0 100vw #69eaab;
  }
}