如何更改滑块范围样式？

Question

我有一个输入来制作价格滑块范围。 我只想改变它的风格，但没有任何效果。 我错过了什么？

感谢您的帮助！

<div class="panel-body">
  <div class="container-fluid">
    <input
      id="range"
      type="text"
      data-slider-ticks="[0, 100, 200, 300, 400, 500]"
      data-slider-ticks-snap-bounds="30"
      data-slider-ticks-labels='["0€", "100€", "200€", "300€", "400€", "500€"]'
    />
  </div>
</div>
{literal}
<style>
  #range {
    height: 5px;
    color: grey;
  }
</style>

<script>
  $("#range").slider({
    ticks: [0, 100, 200, 300, 400, 500],
    ticks_labels: ["0€", "100€", "200€", "300€", "400€", "500€"],
    ticks_snap_bounds: 30
  });
</script>
{/literal}

范围还可以，但样式不适用：

Answer 1

你忘了设置type="range"。

关于如何设置范围滑块结帐https://www.w3schools.com/howto/howto_js_rangeslider.asp

总而言之，您需要设置-webkit-appearance: none;，然后设置背景属性，以便您的高度属性和其他样式可以应用。

<div class="panel-body">
  <div class="container-fluid">
    <input
      id="range"
      type="range"
      data-slider-ticks="[0, 100, 200, 300, 400, 500]"
      data-slider-ticks-snap-bounds="30"
      data-slider-ticks-labels='["0€", "100€", "200€", "300€", "400€", "500€"]'
    />
  </div>
</div>
{literal}

<style>
  /* Styling the slider background */
  #range {
     -webkit-appearance: none;
      width: 100%;
      height: 25px;
      background: grey;
      outline: none;
  }
  
  /* Styling the thumb */
  #range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      background: red;
      cursor: pointer;
  }
</style>

{/literal}