I am currently trying to style an html slider so that it looks something similar to this:
However, my styling isn’t working out and the slider thumb gets too close to the edge of the bar (ignoring the colors, not the concern right now):
I have done some research on how to do this, and Most of the styling here comes from that, but I still cannot get it to work properly, and haven’t been able to find a solution that works.
EDIT: Code Snippet Added
/* STUDY DAY SLIDER */
.days {
-webkit-appearance: none;
width: 25%;
height: 30px;
border-radius: 20px;
outline: none;
background-color: green;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.days::-webkit-scrollbar-track {
}
.days::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
border: 0;
background-color: red;
cursor: pointer;
}
.days::-webkit-slider-thumb::before {
content: var(--thumbContent);
color: white;
}
.days::-moz-range-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
border: 0;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link href="./example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="range" min="1" max="100" class="topic-row-style days" id="topic-row-style">
</body>
</html>