I have a slider in my app and I would like to make it custom. I managed to change its colors and its linear greadient, but I couldn’t make the annotated text: 1 and 4 in this case not get the linear gradient effect. I would like the text to remain white. How could I achieve this?
What I tried:
.st-ef{
background-color: rg
b(11, 100, 100);
}
.css-demzbm {
background-color: rgb(11, 100, 100);
}
div.stSlider > div[data-baseweb = "slider"] > div >div {
background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
border: solid 1px #82CFD0;
border-radius: 8px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
}
div.css-1inwz65.e88czh80{ background-color: rgb(250, 250, 250);
color: rgb(250, 250, 250);!important
}
div.stSlider > div[data-baseweb="slider"] > div > div > div > div
{ color: rgb(14, 38, 74); }
And this looks like:
Also, I would like to remove the red around the slider circle. Is this possible as well?