I have encountered an issue with the slider track while using a customized range slider with CSS. For Mozilla, I utilized the selector for progress (-moz-range-progress) and for IE I used -ms-filler-lower and -ms-filler-upper.
Although it works well for both browsers, I am struggling to find a solution for Chrome using Webkit. This prevents me from changing the color of the track based on the position of the slider thumb.
CSS:
body {
color: red;
font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
margin: 0;
}
header {
background-color: white;
padding: 60px 40px;
}
h1 {
font-size: 200%;
}
h3 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
}
p {
font-size: 90%;
font-weight: normal;
}
article {
-webkit-column-count: 4;
column-count: 4;
}
p {
margin: 0px;
}
/**
* Text Slider Directive - CSS
**/
.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-thumb {
border: none;
cursor: pointer;
-webkit-appearance: none;
background-color: rgba(192, 35, 74, 1);
width: 15px;
height: 15px;
border-radius: 50%;
margin-top: -6px;
}
.text-size-slider .slider::-moz-range-thumb {
border: none;
cursor: pointer;
-webkit-appearance: none;
background-color: rgba(192, 35, 74, 1);
width: 15px;
height: 15px;
border-radius: 50%;
margin-top: -6px;
}
.text-size-slider .slider::-webkit-slider-thumb::before {
content:"YEAH";
display:block;
background:rgba(192, 35, 74, 1);
height:20px;
width:20px;
position:absolute;
top:-20px;
left:-10px;
}
.text-size-slider .slider::-moz-range-thumb::before {
content:"YEAH";
display:block;
background:rgba(192, 35, 74, 1);
height:20px;
width:20px;
position:absolute;
top:-20px;
left:-10px;
}
.pointer {
vertical-align:top;
height: 40px;
width: 40px;
border-radius:20px 20px 0 20px;
background-color:rgba(192, 35, 74, 1);
display:block;
transform: rotate(45deg);
position:absolute;
top: -46px;
margin-left:13px;
color:black;
}
.pointer span {
display: inline-block;
transform: rotate(-45deg);
margin-left:12px;
margin-top: 14px;
color:white;
}
.gray-line {
position: absolute;
height: 2px;
background-color: grey;
top: 17px;
width: 20px;
}
.text-size-slider .slider::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: linear-gradient(90deg, red, brown) 0 100% no-repeat content-box;
border: 0;
}
.text-size-slider .slider::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background-color: grey;
border: 0;
}
.text-size-slider .slider::-moz-range-progress {
background-color: rgba(192, 35, 74, 1);
}
.text-size-slider .slider::--webkit-slider-runnable-progress {
background-color: rgba(192, 35, 74, 1);
}
.text-size-slider .slider:-webkit-fill-lower {
background-color: blue;
}
Check out the plunker for a live demo: https://plnkr.co/edit/ecU8KvlO2jWGWy4jVAcS?p=preview
Expected result: