如何更改滑块范围样式？

Posted 2023-05-08

【中文标题】如何更改滑块范围样式？

【英文标题】：How to change slider range style?

【发布时间】：2020-10-27 09:40:58

【问题描述】：

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

感谢您的帮助！

<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

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

【参考方案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

【讨论】：

感谢您抽出宝贵时间回答我，我按照您的建议将 type = "text" 更改为 type = "range" 但它没有改变任何内容，样式不适用。哦 ！我没有看到链接下面的文字对不起，我正在尝试

在片段中添加了您自己的滑块。