Range slider and labels disappear

Question

When I change the style of my input, the labels and the value of the cursor disappear... I don't know what's the matter... Before :

Then, now that I changed the style :

The code :

 #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>

Thanks for any explanations or help

Answer 1

Ensure you are including the bootstrap-slider namespace if not using jQuery. "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>

with jQuery:

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

without JQuery

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

further examples found: https://seiyria.com/bootstrap-slider/#example-13