I'm struggling with customizing the style of a price slider input range. No matter what I do, the changes don't seem to take effect. Can anyone pinpoint where I may be going wrong?
Appreciate any guidance on this! Thank you!
<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€", "100€", "200€", "300€", "400€", "500€"]'
/>
</div>
</div>
{literal}
<style>
#range {
height: 5px;
color: grey;
}
</style>
<script>
$("#range").slider({
ticks: [0, 100, 200, 300, 400, 500],
ticks_labels: ["0€", "100€", "200€", "300€", "400€", "500€"],
ticks_snap_bounds: 30
});
</script>
{/literal}
Although the slider functionality is working fine, the styling modifications are not being applied: https://i.sstatic.net/nMMUE.png