时间戳

首页 > 解决方案 > 如何更改滑块范围样式？

javascript - 如何更改滑块范围样式？

问题描述

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

谢谢你的帮助！

<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€&quot;, "100€&quot;, "200€&quot;, "300€&quot;, "400€&quot;, "500€&quot;]'
    />
  </div>
</div>
{literal}
<style>
  #range {
    height: 5px;
    color: grey;
  }
</style>

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

范围还可以，但样式不适用： 在此处输入图像描述

标签： javascripthtmljquerycssslider

解决方案

你忘了设置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}

推荐阅读