如何更改滑块的光标？

Question

我有一个输入类型范围滑块，我想用骰子替换蓝色圆圈（“光标”）。我尝试了 content:'\01F3B2' 但它不起作用。当我添加

  #range::before {
    content:'F3B2'
  }

我看到了骰子：

但我没有找到允许替换光标的属性。你能帮忙吗？

非常感谢。

代码：

<div class="panel-body">
    <div id="slidecontainer" class="container-fluid">
        <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}

<script>
    $('#slidecontainer input#range').slider();
</script>

<style>
    #slidecontainer {
        margin: 0 auto;
        background-color: #afe0fc;
        padding: 1.5em;
        border-radius: 5px;
    }
    
    /* 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>
{/literal}

Answer 1

在 CSS 中使用它。

.start{cursor:pointer!important;}

Answer 2

我认为您的选择器有误。试试这个：

  #slidecontainer {
        margin: 0 auto;
        background-color: #afe0fc;
        padding: 1.5em;
        border-radius: 5px;
    }
    
    /* Styling the thumb */
    #range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 30%;
        height: 20px;
        background: #078dd8;
        border-radius: 50%;
        cursor: -moz-grab;
        cursor: -webkit-grab;
      cursor:move;
      
  }
#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;
}

#range::-moz-range-thumb {
    content:'F3B2'
      width:15px;
   height:15px;
  }

<div class="panel-body">
    <div id="slidecontainer" class="container-fluid">
        <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>

Answer 3

试试这个

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Range Slider Picture</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

</body>
</html>
//image your choice

Answer 4

最后，我这样做了：我 post 代码可能会对某人有所帮助 :

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

<script>
    $('#slidecontainer input#range').slider({step: 10, min: 0, max: 500});   
</script>

<style>
   .slider-handle.custom {
    background: transparent none;
    }

/* Or display content like unicode characters or fontawesome icons */
    .slider-handle.custom::before {
    line-height: 10px;
    font-size: 40px;
    content: 'F3B2';
    color: #046072;
    }
    .slider-tick.custom::before {
        line-height: 20px;
        font-size: 20px;
        content: '[=10=]2684';
        color: #046072;
    }
</style>
{/literal}

如何更改滑块的光标？

How to change the cursor of a slider?

javascript

html

css

rangeslider