样式输入范围看起来像进度条

Question

我有一个视频元素,我想创建自己的控制播放器.

我正在使用搜索栏的范围输入.我想这样做的样式:

所以橙色就是你所看到的,而蓝绿色则是剩下的时间.

我设法像这样输入样式:https://jsfiddle.net/d3oeztwt/但我不知道橙色.

我知道我可以使用进度条,但我找不到用进度条触发滑块的方法.

<input type="range">


input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 10px;
    background: #009999;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #99FFFF;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}

Answer 1

我用SCSS做了一个跨浏览器的解决方案(+ ie9,ff,chrome,safari),没有JavaScript.

http://codepen.io/nlfonseca/pen/MwbovQ

@import 'bourbon';

$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #e33d44;
$thumb-width: 28px;
$thumb-height: 18px;
$thumb-radius: 8px;
$thumb-background: #fff;
$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;
}

div {
  height: 100px;
  display: flex;
  justify-content: center;
}

input {
  align-items: center;
  appearance: none;
  background: none;
  cursor: pointer;
  display: flex;
  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;
  }

  &::-webkit-slider-thumb {
    @include size($thumb-width $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);

    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: transparent;
    border-radius: 0;
    border-width: 0;
    color: transparent;
    height: $slider-height;
    margin-top: 10px;
    width: $slider-width;
  }

  &::-ms-thumb {
    @include size($thumb-width $thumb-height);

    background: $thumb-background;
    border-radius: $thumb-radius;
    border: $thumb-border;
  }

  &::-ms-fill-lower {
    background: $background-filled-slider;
    border-radius: 0;
  }

  &::-ms-fill-upper {
    background: $background-slider;
    border-radius: 0;
  }

  &::-ms-tooltip {
    display: none;
  }
}

Answer 2

在 onChange 函数中你可以使用这个：

  const onChangeFunction = (e) => {
    const el = e.target;
    el.style.setProperty("--value", el.value);
    el.style.setProperty("--min", el.min === "" ? "0" : el.min);
    el.style.setProperty("--max", el.max === "" ? "100" : el.max);
    el.style.setProperty("--value", el.value);
  };

并添加 css 部分：

      input[type=range] {
        height: 3px;
        -webkit-appearance: none;
        cursor: pointer;
      }
      
      input[type=range] {
        --range: calc(var(--max) - var(--min));
        --ratio: calc((var(--value) - var(--min)) / var(--range));
        --sx: calc(0.5 * 10px + var(--ratio) * (100% - 10px));
      }
      
      input[type=range]:focus {
        outline: none;
      }
      
 
      input[type=range]::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
        border-radius: 1em;
        background: #FF0000;
        border: none;
        box-shadow: 0 0 2px black;
        margin-top: calc(3px * 0.5 - 10px * 0.5);
        -webkit-appearance: none;
      }
      
      input[type=range]::-webkit-slider-runnable-track {
        height: 3px;
        border-radius: 0.5em;
        background: #efefef;
        border: none;
        box-shadow: none;
      }

      input[type=range]::-webkit-slider-thumb:hover {
        background: #FF0000;
      }
      
      input[type=range]:hover::-webkit-slider-runnable-track {
        background: #e5e5e5;
      }
      
      input[type=range]::-webkit-slider-thumb:active {
        background: #F00000;
      }
      
      input[type=range]:active::-webkit-slider-runnable-track {
        background: #f5f5f5;
      }
      
      input[type=range]::-webkit-slider-runnable-track {
        background: linear-gradient(#F80B00,#F80B00) 0/var(--sx) 100% no-repeat, #efefef;
      }
      
      input[type=range]:hover::-webkit-slider-runnable-track {
        background: linear-gradient(#FF0000,#FF0000) 0/var(--sx) 100% no-repeat, #e5e5e5;
      }
      
      input[type=range]:active::-webkit-slider-runnable-track {
        background: linear-gradient(#F90000,#F90000) 0/var(--sx) 100% no-repeat, #f5f5f5;
      }

您应该收到此消息： 带有进度的输入范围

Answer 3

基于 Webkit/Blink/Gecko 的浏览器（基本上是 Chrome、Opera、Firefox）仅支持将轨道作为单个实体。

在IE中，input type=rangeIE10及以上版本支持。您可以使用::-ms-fill-lower和::-ms-fill-upper进一步自定义任一尺寸拇指上的轨道外观。

更多详细信息，请访问：http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

因此，不幸的是，目前在大多数使用标准伪元素（缺少 javascript）的现代浏览器中这是不可能的。