How to change the cursor of a slider?

Question

I have an input type range slider I'd like to replace the blue circle (the "cursor") by a dice. I tried content:'\01F3B2' but it doesn't work. When I add

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

I see the dices :

But I don't find the property that allows to replace the cursor. Can you help ?

Thanks a lot.

The code :

<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

Finally, I did this:

<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: '\01F3B2';
    color: #046072;
    }
    .slider-tick.custom::before {
        line-height: 20px;
        font-size: 20px;
        content: '\002684';
        color: #046072;
    }
</style>
{/literal}