如何在没有 JS 的情况下使用自定义形状轨迹创建范围输入

Question

我想创建一个具有三角形轨迹条的范围输入，就像出现许多音量输入一样。这是一个例子。

我已阅读此有用的输入样式指南，但它没有关于更改轨迹栏形状的信息。

我不想使用带有 JS 的自定义范围滑块来改变实际输入，我想使用实际范围输入本身。它也应该主要是跨浏览器。

我怎样才能做到这一点？

Answer 1

您无法以跨浏览器的方式可靠地更改轨迹栏本身的形状，但您可以隐藏轨迹栏并在其后面放置元素或图像。这是一个这样做的例子。

HTML

<input type="range" class="font-size-selector pd-select" id="font_size_selector" min="12" value="20" max="100" step="1">
<span class="triangle-range-background-slider"></span>

CSS

/* Trangle */
.triangle-range-background-slider {
  position: relative;
  display: block;
  margin-top: -27px;
  height: 20px;
  background: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'); 
  background-size: 100% auto;
  z-index: 1;
}

/* Input to work with triangle */
input[type=range] {
  position: relative;
  z-index: 3;
}

您也可以使用 CSS 形状来代替，方法是移除背景图像并将此逻辑放置在原位。

.triange-range-background-slider {
    position: relative; 
    display: block; 
    margin-top: -27px; 
    border-top: 10px solid transparent; 
    border-right: 100px solid #3071a9; 
    border-bottom: 10px solid transparent;
    z-index: 1; 
}

CSS 的其余部分是您提供的 CSS-Tricks 链接中的 Hide and Thumb。

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

隐藏输入 CSS

  /* Hide */
  input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
  }

  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  }

  input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;

    /* Hides the slider so custom styles can be added */
    background: transparent; 
    border-color: transparent;
    color: transparent;
  }

拇指输入 CSS

  /* Thumb */
  /* Special styling for WebKit/Blink */
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    // margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
  }

  /* All the same stuff for Firefox */
  input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
  }

  /* All the same stuff for IE */
  input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
  }