Question

当我更改输入样式时，标签和光标的值会消失... 我不知道怎么回事... 之前：

然后，现在我更改了样式：

代码：

 #slidecontainer {
  margin: 0 auto;
  background-color: #afe0fc;
  padding: 1.5em;
  border-radius: 5px;
    }
  /* Styling the slider background */
  #range {
  -webkit-appearance: none;
  background-color: grey;
  outline: none;
  height: 3px;
  border-radius: 1px;
  width:100%; 
  }
  
  /* Styling the thumb */
  #range::-webkit-slider-thumb {
      -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #078dd8;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  }

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

感谢您的任何解释或帮助

Answer 1

如果不使用jQuery，请确保包含bootstrap-slider名称空间。 “ data-provide =” slider“

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

使用jQuery：

$('#slidecontainer input').slider();

没有JQuery

var slider = new Slider('#slidecontainer input', {});

找到更多示例：https://seiyria.com/bootstrap-slider/#example-13

Answer 2

谢谢Samuel Cole花时间帮助我。标签和值又回来了，但是样式现在不见了...

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

<style>
    #slidecontainer {
  margin: 0 auto;
  background-color: #afe0fc;
  padding: 1.5em;
  border-radius: 5px;
    }
  /* Styling the slider background */
  #range {
  -webkit-appearance: none;
  background-color: grey;
  outline: none;
  height: 3px;
  border-radius: 1px;
  width:100%; 
  }
  
  /* Styling the thumb */
  #range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #078dd8;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  }
</style>
<script>
    $('#slidecontainer input').slider();
</script>
{/literal}

范围滑块和标签消失

2 个答案: