Seeking assistance in changing the slider track color upon selection. Struggling to achieve the desired outcome of altering the color as it slides.
CSS:
/* Custom Styles */
.text-size-slider {
line-height: 100%;
font-size: 14px;
position: relative;
}
.text-size-slider .small-letter, .text-size-slider .big-letter {
font-weight: bold;
}
.text-size-slider .slider {
-webkit-appearance: none;
margin: 0 8px;
}
.text-size-slider .slider:focus {
outline: none;
}
.text-size-slider .slider::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: rgba(192, 35, 74, 0.85);
border: 0;
}
HTML:
<div class="text-size-slider">
<span class="pointer" style="left:{{position}}px;">
<span>{{textSize}}</span>
</span>
<span class="small-letter" ng-style="{ fontSize: min + unit }">
<small>T</small>T</span>
<input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}"
ng-model="textSize" class="slider" value="{{ value }}"
ng-change="updatepointer()" />
<span class="big-letter" ng-style="{fontSize: max + unit }">
<small>T</small>T</span>
</div>