如何编写滑块轨道颜色变化功能？

Question

我有一个自定义CSS范围滑块。当我在滑块中移动时，我需要改变轨道的颜色（即，当我通过滑块时，最初轨道必须是灰色，颜色必须改变）。它在FireFox和IE中运行良好。

但只有Chrome问题，如何解决？

HTML：

   <text-size-slider min="12" max="36" unit="px" value="18" step="0">
        <!-- END of Custom AngularJS Directive -->
    </text-size-slider>

使用Javascript：

angular.module('textSizeSlider', []) .directive('textSizeSlider', ['$document', function ($document) {

  var ctrl = ['$scope', '$element', function ($scope, $element) {
      $scope.position = 0;
      $scope.updatepointer = () => {
          var input = $element.find("input");
          var width = input[0].offsetWidth - 16; // 16 for offsetting padding
          var ratio = ($scope.textSize - $scope.min) / ($scope.max - $scope.min);
          var position = width * ratio;
          $scope.position = Math.trunc(position);

      }

  }]

  return {
      controller: ctrl,
      restrict: 'E',
      template: '<div class="text-size-slider"><span class="pointer" style="left:{{position}}px;"><span>{{textSize}}</span></span><span class="small-letter" ng-style="{ fontSize: min + unit }"><small>T</small>T</span> <input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" ng-change="updatepointer()" /> <span class="big-letter" ng-style="{ fontSize: max + unit }"><small>T</small>T</span></div>',
      scope: {
          min: '@',
          max: '@',
          unit: '@',
          value: '@',
          step: '@'
      },
      link: function (scope, element, attr) {
          scope.textSize = scope.value;

          scope.$watch('textSize', function (size) {
              $document[0].body.style.fontSize = size + scope.unit;
              scope.updatepointer();
          });
      }
  }

  }]);

Plunker链接：https://plnkr.co/edit/ecU8KvlO2jWGWy4jVAcS?p=preview

预期产出：

Answer 1

我找到了以下解决方案

请查看此主题http://stackoverflow.com/questions/1679577/get-document-stylesheets-by-name-instead-of-index

因此，我们无法从javascript修改输入shadow-root，但我们可以更改styleSheet元素。我从上面的主题中获取了setStyleRule函数，并将其用于更改元素的CSS。

<强>更新

添加灰色图层以进行跟踪。

＆＃13;

＆＃13;

// Code goes here


angular.module('textSizeSlider', [])
  .directive('textSizeSlider', ['$document', function ($document) {
    
      setStyleRule = function(selector, rule) {
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];

    for( var i in document.styleSheets ){
        if( document.styleSheets[i].href && document.styleSheets[i].href.indexOf("myStyle.css") ) {
            stylesheet = document.styleSheets[i];
            break;
        }
    }

    if( stylesheet.addRule ){
        stylesheet.addRule(selector, rule);
    } else if( stylesheet.insertRule ){
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
    }
    }

      var ctrl = ['$scope', '$element', function ($scope, $element) {
          $scope.position = 0;
          $scope.updatepointer = () => {
              var input = $element.find("input");
              var width = input[0].offsetWidth - 16; // 16 for offsetting padding
              var ratio = ($scope.textSize - $scope.min) / ($scope.max - $scope.min);
              var position = width * ratio;
              $scope.position = Math.trunc(position);
              $scope.updatecolor();
              $scope.updateGrayLine();

          }
          
          
          
          $scope.updateGrayLine = () => {
          
             var inputWidth = 129;
             var maxFontSize = 24;
             var k = Math.floor(inputWidth / maxFontSize);
             var inputOffset = 26;
             var pointerWIdth = 4;
             
             
             var width =  maxFontSize * k - ($scope.textSize - 12) * k - pointerWIdth;
          
             $element[0].querySelector('.gray-line').style.width = width + 'px';
             if($scope.textSize > 33) {
                $element[0].querySelector('.gray-line').style.width = '0px';
             }
             $element[0].querySelector('.gray-line').style.left = (inputWidth - width + inputOffset) + 'px';
          
          }
          
          $scope.updateGrayLine();
          
          $scope.updatecolor = () => {
            
            //$element[0].querySelector('input').style.backgroundColor = 'rgba(192, '+ $scope.unit+', 74, 1)';
            //console.log({elem: $element[0].querySelector('input')});
            
            
            setStyleRule('.text-size-slider .slider::-webkit-slider-runnable-track', 'background-color: rgba(192, ' + ($scope.textSize * 3)  +', 74, 1);')
            setStyleRule('.text-size-slider .slider::-webkit-slider-thumb', 'background-color: rgba(192, ' + ($scope.textSize * 3)  +', 74, 1);')
            $element[0].querySelector('.pointer').style.backgroundColor =  'rgba(192, ' + ($scope.textSize * 3)  +', 74, 1)';
          }
      }]

      return {
          controller: ctrl,
          restrict: 'E',
          template: '<div class="text-size-slider"><span class="gray-line"></span><span class="pointer" style="left:{{position}}px;"><span>{{textSize}}</span></span><span class="small-letter" ng-style="{ fontSize: min + unit }"><small>T</small>T</span> <input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" ng-change="updatepointer()" /> <span class="big-letter" ng-style="{ fontSize: max + unit }"><small>T</small>T</span></div>',
          scope: {
              min: '@',
              max: '@',
              unit: '@',
              value: '@',
              step: '@'
          },
          link: function (scope, element, attr) {
              scope.textSize = scope.value;
              
              

              scope.$watch('textSize', function (size) {
                  $document[0].body.style.fontSize = size + scope.unit;
                  
                  
                  
                  scope.updatepointer();
              });
          }
      }
  }]);

＆＃13;

/* Styles go here */

body {

  color: red;
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin: 0;
}

header {
  
  background-color: white;  
  padding: 60px 40px;
}


h1 {
  font-size: 200%;
}

h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

p {
  font-size: 90%;
  font-weight: normal;
}

article {
  -webkit-column-count: 4;
  column-count: 4;
}

p {
  margin: 0px;
}

/**
 * Text Slider Directive - CSS  
 **/
.text-size-slider {
  line-height: 100%;
  font-size: 14px;
  position: relative;
}

.text-size-slider .small-letter,.text-size-slider .big-letter
{
  font-weight: bold;
}

.text-size-slider .slider {
  -webkit-appearance: none;
  margin: 0 8px;
}

.text-size-slider .slider:focus {
  outline: none;
}

.text-size-slider .slider::-webkit-slider-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}
.text-size-slider .slider::-moz-range-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}

.text-size-slider .slider::-webkit-slider-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}
.text-size-slider .slider::-moz-range-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}

.pointer {
    vertical-align:top;
  height: 40px;
  width: 40px;
  border-radius:20px 20px  0 20px;
  background-color:rgba(192, 35, 74, 1);
  display:block;
  transform: rotate(45deg);
  position:absolute;
  top: -46px;
  margin-left:13px;
 
  color:black;
  
}

.pointer span {
  display: inline-block;
  transform: rotate(-45deg);
  margin-left:12px;
  margin-top: 14px;
  color:white;
  
  
}
.gray-line {

  position: absolute;
  height: 2px;
  background-color: grey;
  top: 17px;
  width: 20px;

}

.text-size-slider .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: rgba(192, 35, 74, 1);
  border: 0;
}

.text-size-slider .slider::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
   background-color: grey;
  border: 0;
}
.text-size-slider .slider::-moz-range-progress {
  background-color: rgba(192, 35, 74, 1); 
}
.text-size-slider .slider::--webkit-slider-runnable-progress {
  background-color: rgba(192, 35, 74, 1); 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <header ng-app="textSizeSlider">
        <!-- Custom AngularJS Directive -->
        <text-size-slider min="12" max="36" unit="px" value="18" step="0">
            <!-- END of Custom AngularJS Directive -->
        </text-size-slider>
    </header>

    <p>
        <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry.
    </p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不太了解灰色（因为我实际上是色盲）

尝试这个希望它适合你，并选择rgb颜色代码，但你想要..

＆＃13;

＆＃13;

<html>
<head>
	<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>

		// Code goes here


angular.module('textSizeSlider', [])
  .directive('textSizeSlider', ['$document', function ($document) {

      var ctrl = ['$scope', '$element', function ($scope, $element) {
          $scope.position = 0;
          $scope.updatepointer = () => {
              var input = $element.find("input");
              var width = input[0].offsetWidth - 16; // 16 for offsetting padding
              var ratio = ($scope.textSize - $scope.min) / ($scope.max - $scope.min);
              var position = width * ratio;
              $scope.position = Math.trunc(position);

          }

      }]

      return {
          controller: ctrl,
          restrict: 'E',
          template: '<div class="text-size-slider"><span class="pointer" style="left:{{position}}px;"><span>{{textSize}}</span></span><span class="small-letter" ng-style="{ fontSize: min + unit }"><small>T</small>T</span> <input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" ng-change="updatepointer()" /> <span class="big-letter" ng-style="{ fontSize: max + unit }"><small>T</small>T</span></div>',
          scope: {
              min: '@',
              max: '@',
              unit: '@',
              value: '@',
              step: '@'
          },
          link: function (scope, element, attr) {
              scope.textSize = Number(scope.value);


              scope.$watch('textSize', function (size) {
                scope.textSize = Number(size);
                var doc = document.getElementById('thisIsToColored');

                  $document[0].body.style.fontSize = size + scope.unit;

                      var colorCode = Math.floor((255 * size) / 100),
                    g = Math.floor((255 * (100 - size)) / 100),
                    b = 0;
                     var color = 'rgb(0, 0, ' + colorCode+')';
                    doc.style.color = color;


                  scope.updatepointer();
              });
          }
      }
  }]);
	</script>
<style type="text/css">
    /* Styles go here */

body {

  color: red;
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin: 0;
}

header {
  
  background-color: white;  
  padding: 60px 40px;
}


h1 {
  font-size: 200%;
}

h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

p {
  font-size: 90%;
  font-weight: normal;
}

article {
  -webkit-column-count: 4;
  column-count: 4;
}

p {
  margin: 0px;
}

/**
 * Text Slider Directive - CSS  
 **/
.text-size-slider {
  line-height: 100%;
  font-size: 14px;
  position: relative;
}

.text-size-slider .small-letter,.text-size-slider .big-letter
{
  font-weight: bold;
}

.text-size-slider .slider {
  -webkit-appearance: none;
  margin: 0 8px;
}

.text-size-slider .slider:focus {
  outline: none;
}

.text-size-slider .slider::-webkit-slider-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}
.text-size-slider .slider::-moz-range-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}

.text-size-slider .slider::-webkit-slider-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}
.text-size-slider .slider::-moz-range-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}

.pointer {
    vertical-align:top;
  height: 40px;
  width: 40px;
  border-radius:20px 20px  0 20px;
  background-color:rgba(192, 35, 74, 1);
  display:block;
  transform: rotate(45deg);
  position:absolute;
  top: -46px;
  margin-left:13px;
 
  color:black;
  
}

.pointer span {
  display: inline-block;
  transform: rotate(-45deg);
  margin-left:12px;
  margin-top: 14px;
  color:white;
  
  
}

.text-size-slider .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: rgba(192, 35, 74, 1);
  border: 0;
}

.text-size-slider .slider::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
   background-color: grey;
  border: 0;
}
.text-size-slider .slider::-moz-range-progress {
  background-color: rgba(192, 35, 74, 1); 
}
.text-size-slider .slider::--webkit-slider-runnable-progress {
  background-color: rgba(192, 35, 74, 1); 
}



</style>

</head>
<body>

    <header ng-app="textSizeSlider">
        <!-- Custom AngularJS Directive -->
        <text-size-slider min="12" max="36" unit="px" value="18" step="0">
            <!-- END of Custom AngularJS Directive -->
        </text-size-slider>
    </header>

    <p id="thisIsToColored">
        <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry.
    </p>


</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Here 是我的傻瓜。

Answer 3

请尝试我的Chrome代码。我希望它能起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    input[type='range'] {
      width: 200px;
      height: 3px;
      -webkit-appearance: none;
      background-color: #1682fb;
      display: flex;
      outline: none;
        border: none;
    } 

    input[type='range']::-webkit-slider-runnable-track {
      height: 5px;
      -webkit-appearance: none;
      margin-top: -10px;
    }

    input[type='range']::-webkit-slider-thumb {
      width: 15px;
      -webkit-appearance: none;
      height: 15px;
      border-radius: 50%;
      cursor: pointer;
      background: #1682fb; 
      box-shadow: 5px 0 0 -6px #e3e4e6,  10px 0 0 -6px #e3e4e6,
     21px 0 0 -6px #e3e4e6, 22px 0 0 -6px #e3e4e6,
    23px 0 0 -6px #e3e4e6, 24px 0 0 -6px #e3e4e6, 25px 0 0 -6px #e3e4e6,
    26px 0 0 -6px #e3e4e6, 27px 0 0 -6px #e3e4e6, 28px 0 0 -6px #e3e4e6,
    29px 0 0 -6px #e3e4e6, 30px 0 0 -6px #e3e4e6, 31px 0 0 -6px #e3e4e6,
    32px 0 0 -6px #e3e4e6, 33px 0 0 -6px #e3e4e6, 34px 0 0 -6px #e3e4e6,
    35px 0 0 -6px #e3e4e6, 36px 0 0 -6px #e3e4e6, 37px 0 0 -6px #e3e4e6,
    38px 0 0 -6px #e3e4e6, 39px 0 0 -6px #e3e4e6, 40px 0 0 -6px #e3e4e6,
    41px 0 0 -6px #e3e4e6, 42px 0 0 -6px #e3e4e6, 43px 0 0 -6px #e3e4e6,
    44px 0 0 -6px #e3e4e6, 45px 0 0 -6px #e3e4e6, 46px 0 0 -6px #e3e4e6,
    47px 0 0 -6px #e3e4e6, 48px 0 0 -6px #e3e4e6, 49px 0 0 -6px #e3e4e6,
    50px 0 0 -6px #e3e4e6, 51px 0 0 -6px #e3e4e6, 52px 0 0 -6px #e3e4e6,
    53px 0 0 -6px #e3e4e6, 54px 0 0 -6px #e3e4e6, 55px 0 0 -6px #e3e4e6,
    56px 0 0 -6px #e3e4e6, 57px 0 0 -6px #e3e4e6, 58px 0 0 -6px #e3e4e6,
    59px 0 0 -6px #e3e4e6, 60px 0 0 -6px #e3e4e6, 61px 0 0 -6px #e3e4e6,
    62px 0 0 -6px #e3e4e6, 63px 0 0 -6px #e3e4e6, 64px 0 0 -6px #e3e4e6,
    65px 0 0 -6px #e3e4e6, 66px 0 0 -6px #e3e4e6, 67px 0 0 -6px #e3e4e6,
    68px 0 0 -6px #e3e4e6, 69px 0 0 -6px #e3e4e6, 70px 0 0 -6px #e3e4e6,
    71px 0 0 -6px #e3e4e6, 72px 0 0 -6px #e3e4e6, 73px 0 0 -6px #e3e4e6,
    74px 0 0 -6px #e3e4e6, 75px 0 0 -6px #e3e4e6, 76px 0 0 -6px #e3e4e6,
    77px 0 0 -6px #e3e4e6, 78px 0 0 -6px #e3e4e6, 79px 0 0 -6px #e3e4e6,
    80px 0 0 -6px #e3e4e6, 81px 0 0 -6px #e3e4e6, 82px 0 0 -6px #e3e4e6,
    83px 0 0 -6px #e3e4e6, 84px 0 0 -6px #e3e4e6, 85px 0 0 -6px #e3e4e6,
    86px 0 0 -6px #e3e4e6, 87px 0 0 -6px #e3e4e6, 88px 0 0 -6px #e3e4e6,
    89px 0 0 -6px #e3e4e6, 90px 0 0 -6px #e3e4e6, 91px 0 0 -6px #e3e4e6,
    92px 0 0 -6px #e3e4e6, 93px 0 0 -6px #e3e4e6, 94px 0 0 -6px #e3e4e6,
    95px 0 0 -6px #e3e4e6, 96px 0 0 -6px #e3e4e6, 97px 0 0 -6px #e3e4e6,
    98px 0 0 -6px #e3e4e6, 99px 0 0 -6px #e3e4e6, 100px 0 0 -6px #e3e4e6,
    101px 0 0 -6px #e3e4e6, 102px 0 0 -6px #e3e4e6, 103px 0 0 -6px #e3e4e6,
    104px 0 0 -6px #e3e4e6, 105px 0 0 -6px #e3e4e6, 106px 0 0 -6px #e3e4e6,
    107px 0 0 -6px #e3e4e6, 108px 0 0 -6px #e3e4e6, 109px 0 0 -6px #e3e4e6,
    110px 0 0 -6px #e3e4e6, 111px 0 0 -6px #e3e4e6, 112px 0 0 -6px #e3e4e6,
    113px 0 0 -6px #e3e4e6, 114px 0 0 -6px #e3e4e6, 115px 0 0 -6px #e3e4e6,
    116px 0 0 -6px #e3e4e6, 117px 0 0 -6px #e3e4e6, 118px 0 0 -6px #e3e4e6,
    119px 0 0 -6px #e3e4e6, 120px 0 0 -6px #e3e4e6, 121px 0 0 -6px #e3e4e6,
    122px 0 0 -6px #e3e4e6, 123px 0 0 -6px #e3e4e6, 124px 0 0 -6px #e3e4e6,
    125px 0 0 -6px #e3e4e6, 126px 0 0 -6px #e3e4e6, 127px 0 0 -6px #e3e4e6,
    128px 0 0 -6px #e3e4e6, 129px 0 0 -6px #e3e4e6, 130px 0 0 -6px #e3e4e6,
    131px 0 0 -6px #e3e4e6, 132px 0 0 -6px #e3e4e6, 133px 0 0 -6px #e3e4e6,
    134px 0 0 -6px #e3e4e6, 135px 0 0 -6px #e3e4e6, 136px 0 0 -6px #e3e4e6,
    137px 0 0 -6px #e3e4e6, 138px 0 0 -6px #e3e4e6, 139px 0 0 -6px #e3e4e6,
    140px 0 0 -6px #e3e4e6, 141px 0 0 -6px #e3e4e6, 142px 0 0 -6px #e3e4e6,
    143px 0 0 -6px #e3e4e6, 144px 0 0 -6px #e3e4e6, 145px 0 0 -6px #e3e4e6,
    146px 0 0 -6px #e3e4e6, 147px 0 0 -6px #e3e4e6, 148px 0 0 -6px #e3e4e6,
    149px 0 0 -6px #e3e4e6, 150px 0 0 -6px #e3e4e6, 151px 0 0 -6px #e3e4e6,
    152px 0 0 -6px #e3e4e6, 153px 0 0 -6px #e3e4e6, 154px 0 0 -6px #e3e4e6,
    155px 0 0 -6px #e3e4e6, 156px 0 0 -6px #e3e4e6, 157px 0 0 -6px #e3e4e6,
    158px 0 0 -6px #e3e4e6, 159px 0 0 -6px #e3e4e6, 160px 0 0 -6px #e3e4e6,
    161px 0 0 -6px #e3e4e6, 162px 0 0 -6px #e3e4e6, 163px 0 0 -6px #e3e4e6,
    164px 0 0 -6px #e3e4e6, 165px 0 0 -6px #e3e4e6, 166px 0 0 -6px #e3e4e6,
    167px 0 0 -6px #e3e4e6, 168px 0 0 -6px #e3e4e6, 169px 0 0 -6px #e3e4e6,
    170px 0 0 -6px #e3e4e6, 171px 0 0 -6px #e3e4e6, 172px 0 0 -6px #e3e4e6,
    173px 0 0 -6px #e3e4e6, 174px 0 0 -6px #e3e4e6, 175px 0 0 -6px #e3e4e6,
    176px 0 0 -6px #e3e4e6, 177px 0 0 -6px #e3e4e6, 178px 0 0 -6px #e3e4e6,
    179px 0 0 -6px #e3e4e6, 180px 0 0 -6px #e3e4e6, 181px 0 0 -6px #e3e4e6,
    182px 0 0 -6px #e3e4e6, 183px 0 0 -6px #e3e4e6, 184px 0 0 -6px #e3e4e6,
    185px 0 0 -6px #e3e4e6, 186px 0 0 -6px #e3e4e6, 187px 0 0 -6px #e3e4e6,
    188px 0 0 -6px #e3e4e6, 189px 0 0 -6px #e3e4e6, 190px 0 0 -6px #e3e4e6,
    191px 0 0 -6px #e3e4e6, 192px 0 0 -6px #e3e4e6, 193px 0 0 -6px #e3e4e6,
    194px 0 0 -6px #e3e4e6, 195px 0 0 -6px #e3e4e6, 196px 0 0 -6px #e3e4e6,
    197px 0 0 -6px #e3e4e6, 198px 0 0 -6px #e3e4e6, 199px 0 0 -6px #e3e4e6,
    200px 0 0 -6px #e3e4e6, 201px 0 0 -6px #e3e4e6, 202px 0 0 -6px #e3e4e6,
    203px 0 0 -6px #e3e4e6, 204px 0 0 -6px #e3e4e6, 205px 0 0 -6px #e3e4e6,
    206px 0 0 -6px #e3e4e6, 207px 0 0 -6px #e3e4e6, 208px 0 0 -6px #e3e4e6,
    209px 0 0 -6px #e3e4e6, 210px 0 0 -6px #e3e4e6, 211px 0 0 -6px #e3e4e6,
    212px 0 0 -6px #e3e4e6, 213px 0 0 -6px #e3e4e6, 214px 0 0 -6px #e3e4e6,
    215px 0 0 -6px #e3e4e6, 216px 0 0 -6px #e3e4e6, 217px 0 0 -6px #e3e4e6,
    218px 0 0 -6px #e3e4e6, 219px 0 0 -6px #e3e4e6, 220px 0 0 -6px #e3e4e6,
    221px 0 0 -6px #e3e4e6, 222px 0 0 -6px #e3e4e6, 223px 0 0 -6px #e3e4e6,
    224px 0 0 -6px #e3e4e6, 225px 0 0 -6px #e3e4e6, 226px 0 0 -6px #e3e4e6,
    227px 0 0 -6px #e3e4e6, 228px 0 0 -6px #e3e4e6, 229px 0 0 -6px #e3e4e6,
    230px 0 0 -6px #e3e4e6, 231px 0 0 -6px #e3e4e6, 232px 0 0 -6px #e3e4e6,
    233px 0 0 -6px #e3e4e6, 234px 0 0 -6px #e3e4e6, 235px 0 0 -6px #e3e4e6,
    236px 0 0 -6px #e3e4e6, 237px 0 0 -6px #e3e4e6, 238px 0 0 -6px #e3e4e6,
    239px 0 0 -6px #e3e4e6, 240px 0 0 -6px #e3e4e6;
  margin-top: 0px;
    }
    </style>
</head>
<body>
    <div style="overflow: hidden; height: 15px;padding-top: 10px;padding-right:3px;width: 200px;">
    <input type="range" name="" id="" min="=0" max="100" step="1">
</div>
</body>
</html>