JSFiddle - React, Tailwind, and code Playground

by AlexLvovsky

HTML

<div style="height: 100px;display: flex;justify-content: center;">
  <input type="range"  min="0" max="100" value="40" step="1"/>
</div>

SCSS

// @import 'bourbon';

$slider-width-number: 225;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$slider-border-width: 1px !default;
$slider-border-color: #d5d5d5 !default;
$background-slider: #f6f6f6;
$background-filled-slider: #0098c9;
$thumb-width: 28px;
$thumb-height: 28px;
$thumb-radius: 50%;
$thumb-background: #41bea8;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;

@function makelongshadow($color, $size) {
  $val: 5px 0 0 $size $color;
  @for $i from 6 through $slider-width-number {
    $val: #{$val}, #{$i}px 0 0 $size #{$color};
  }
  @return $val;
}

input[type="range"] {
  appearance: none;
  background: none;
  cursor: pointer;
  display: inline-block;
  height: 100%;
  min-height: 50px;
  overflow: hidden;
  width: $slider-width;

  &:focus {
    box-shadow: none;
    outline: none;
  }
  
  &::-webkit-slider-runnable-track {
    background: $background-filled-slider;
    content: '';
    height: $slider-height;
    pointer-events: none;
    border: $slider-border-width solid $slider-border-color;
  }
  
  &::-webkit-slider-thumb {
    // @include size($thumb-width $thumb-height);
    width: $thumb-width;
    height: $thumb-height;
    appearance: none;
    background: $thumb-background;
    border-radius: $thumb-radius;
    box-shadow: makelongshadow($background-slider, $shadow-size);
    margin-top: $fit-thumb-in-slider;
    border: $thumb-border;
  }
  
  
  &::-moz-range-track {
    width: $slider-width;
    height: $slider-height;
  }

  &::-moz-range-thumb {
    // @include size($thumb-width $thumb-height);
    width: $thumb-width;
    height: $thumb-height;
    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
    position: relative;
  }

  &::-moz-range-progress {
    height: $slider-height;
    background: $background-filled-slider;
    border: 0;
    margin-top: 0;
  }

  &::-ms-track {
    background: transparent;
    border: 0;
    border-color:...