How to make mobile responsive vertical range slider - javascript

I have done a range slider position into vertical. but it's not responsive. I'm checked in chrome default mobile devices. when adjusting the range slider it will scroll the page
I have added my code here.
.slido{
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
-webkit-transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<input type="range" class="slido" min="1" max="100" step="1">

Using just transform on an element does not affect the size or position of its parent or of any other elements, at all. There is absolutely no way to change this fact of how transform works. so adding the div on parent level (which can handle the overflow of rotation) is one solution.
code Updated:
.slido {
-webkit-appearance: none;
width: 100vh;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.rotation-wrapper-outer {
display: table;
}
.rotation-wrapper-inner {
padding: 50% 0;
height: 0;
}
.element-to-rotate {
display: block;
transform-origin: top left;
/* Note: for a CLOCKWISE rotation, use the commented-out
transform instead of this one. */
transform: rotate(-90deg) translate(-100%);
/* transform: rotate(90deg) translate(0, -100%); */
margin-top: -50%;
/* Not vital, but possibly a good idea if the element you're rotating contains
text and you want a single long vertical line of text and the pre-rotation
width of your element is small enough that the text wraps: */
white-space: nowrap;
}
<div id="container">
<div class="rotation-wrapper-outer">
<div class="rotation-wrapper-inner">
<input type="range" class="slido" min="1" max="100" step="1">
</div>
</div>
</div>

You have transform the horizontal slider in to vertical which won't work so you can use vertical slider only check snippet.
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight/2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider
};
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #3D3D4A;
color: white;
font-family: sans-serif;
}
.info {
position: absolute;
top: 0;
left: 0;
padding: 10px;
opacity: 0.5;
}
.container {
position: relative;
display: inline-block;
padding-top: 40px;
}
.range-slider {
display: inline-block;
width: 40px;
position: relative;
text-align: center;
max-height: 100%;
}
.range-slider:before {
position: absolute;
top: -2em;
left: 0.5em;
content: attr(data-slider-value) '%';
color: white;
font-size: 90%;
}
.range-slider__thumb {
position: absolute;
left: 5px;
width: 30px;
height: 30px;
line-height: 30px;
background: white;
color: #777;
font-size: 50%;
box-shadow: 0 0 0 4px #3D3D4A;
border-radius: 50%;
pointer-events: none;
}
.range-slider__bar {
left: 16px;
bottom: 0;
position: absolute;
background: linear-gradient(dodgerblue, blue);
pointer-events: none;
width: 8px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: calc(100vh - 50px);
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="range-slider">
<input type="range" orient="vertical" min="0" max="100" />
<div class="range-slider__bar"></div>
<div class="range-slider__thumb"></div>
</div>
</div>

Related

CSS / HTML layering problems

I have made a toggle-switch in HTML with a label and styled in css. When the toggle is on its working as intended, but when its off the label overlaps with the switch.
The toggle container wont layer on top of the label element. I have tried with z-index and different positions, but to no avail.
Built with React, and the CSS is in the pre-made App.css file.
React // HTML // Javascript
const toggleClasses = classNames('wrg-toggle', {
'wrg-toggle--checked': toggle,
'wrg-toggle--disabled': disabled
}, className);
return(
<div
onMouseOver={() => setHoveredElement(5)}
onMouseLeave={() => setHoveredElement(null)}
>
<div onClick={triggerToggle} className={toggleClasses}>
<div className="wrg-toggle-container">
<label htmlFor="grid">Enable grid</label>
<div className="wrg-toggle-check">
<span>{ getIcon('checked')}</span>
</div>
<div className="wrg-toggle-uncheck">
<span>{ getIcon('unchecked')}</span>
</div>
</div>
<div className="wrg-toggle-circle"></div>
<input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
</div>
</div>
);
};
CSS code
.wrg-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
margin-left: 5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.wrg-toggle-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wrg-toggle-check, .wrg-toggle-uncheck {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
}
.wrg-toggle-check {
z-index: 3;
left: 8px;
position: absolute;
opacity: 0;
}
.wrg-toggle-uncheck {
opacity: 1;
right: 10px;
top: 2px;
position:inherit;
z-index: 50;
opacity: 1;
background-color: white;
}
label {
float: right;
right: 0.5em;
width: 8em;
margin-left: 0px;
text-align: center;
margin-right: 20px;
background-color: #8E9092;
border-radius: 30px;
border-top-right-radius: 0;
border-bottom-right-radius: 0 ;
height: 24px;
border: solid 1px;
top: -1.3px;
position: relative;
z-index: 0;
}
.wrg-toggle-uncheck span,
.wrg-toggle-check span {
align-items: center;
display: flex;
height: 10px;
justify-content: center;
position: relative;
width: 10px;
}
.wrg-toggle-container{
width: 50px;
height: 24px;
padding: 0;
left: 10em;
border-radius: 30px;
background-color: #f5f6f8;
transition: all .2s ease;
border: solid 1px;
z-index: 100;
}
.wrg-toggle-container .wrg-toggle-check{
width: 50px;
height: 24px;
left: -0.3px;
border-radius: 30px;
background-color:#61dafb;
border: solid 1px;
top: 0px;
}
.wrg-toggle-circle{
transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
position: absolute;
top: 3px;
left: 1px;
width: 22px;
height: 21px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
z-index: 30;
}
.wrg-toggle--checked .wrg-toggle-check{
opacity: 1;
position:relative;
border-top: 2px;
border-left: -3px;
}
.wrg-toggle--checked .wrg-toggle-uncheck {
opacity: 0;
border: 0;
}
.wrg-toggle--checked .wrg-toggle-circle {
left: 27px;
}
.wrg-toggle--checked .wrg-toggle-circle:after {
content: "✔";
color: green;
}
Solved!
added a
.wrg-toggle-container .wrg-toggle-uncheck {
position: absolute;
z-index: 1;
}

SweetAlert Icon overflow-y

I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash
For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.

Button with hidden input

I want to create a button with a hidden input that activates once the button was pressed.
I made demo but in this demo input animated via changing width and padding which is not good.
So is there any better way to animate this button?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input, label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
Attribute 'active' is added by js after the button was pressed.
And there is the demo:
function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input, label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms, opacity 400ms 0ms;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms, opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>
So there's the answer that my teacher came up with.
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input, label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
Here's the demo

How to make the thumb of a slider move all the way to the end?

Basically, I want a range slider that works well for true and false.
fieldset > * {
vertical-align: middle;
}
.quiz-label-left, .quiz-label-right{
display: inline-block;
width: 50px;
padding: 2px;
text-align: center;
}
.quiz-slider {
-webkit-appearance: none;
display: inline-block;
width: 100px;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.quiz-slider:hover {
opacity: 1;
}
.quiz-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider-div {
width: 100%;
margin: 0 auto;
}
<fieldset>
<span class="quiz-label quiz-label-left">TRUE</span>
<input type="range" class="quiz-slider" name="quiz-slider" min="0" max="2" step="1" value="1">
<span class="quiz-label quiz-label-right">FALSE</span>
</fieldset>
The idea was to use 2 as true, 0 as false, and 1 as the default. The problem is, with such a small range, the thumb doesn't move very much. Ideally, I'd have the thumb move all the way to the end for either answer. Does anyone know how to do this?
So, apparently what was happening was that the slider was inheriting a padding from a selector
.quiz-card * {
padding: 0px 30px;
}
This was causing my thumb to have a tiny range in which to move. Setting the slider's padding to 0 fixed it.
.quiz-slider {
-webkit-appearance: none;
display: inline-block;
width: 100px;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
padding: 0;
}
Simple:
document.getElementsByClassName("quiz-slider")[0].value = 2;
Id and tag name selectors also work.
here is the complete code:
document.getElementsByClassName("quiz-slider")[0].value = 2;
fieldset > * {
vertical-align: middle;
}
.quiz-label-left, .quiz-label-right{
display: inline-block;
width: 50px;
padding: 2px;
text-align: center;
}
.quiz-slider {
-webkit-appearance: none;
display: inline-block;
width: 100px;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.quiz-slider:hover {
opacity: 1;
}
.quiz-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider-div {
width: 100%;
margin: 0 auto;
}
<!doctype html>
<html>
<body>
<fieldset>
<span class="quiz-label quiz-label-left">TRUE</span>
<input type="range" class="quiz-slider" name="quiz-slider" min="0" max="2" step="1" value="1">
<span class="quiz-label quiz-label-right">FALSE</span>
</fieldset>
</body>
</html>

Range Slider - how to style on IE/Edge?

I'm trying to style this range slider on IE. It's been quite a nightmare. Anyone knows why fill color for the track doesn't work?
It's also not quite applying border-radius on the track.
&::-ms-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 8px;
background: $beige-yellow;
border-radius: 12px;
}
&::-ms-fill-lower {
height: 8px;
background: $army-green;
}
&::-ms-fill-upper {
background: $beige-yellow;
}
See full code here: https://codepen.io/anon/pen/PMQKdp
First, we should use input[type="range"] before the IE proprietary pseudo-elements to style the range slider in IE and Edge. So we should delete the .slider::-ms-track, .slider::-ms-fill-lower, .slider::-ms-thumb, .slider::-ms-tooltip part in CSS and write like below instead:
input[type="range"]::-ms-fill-lower {
...
}
input[type="range"]::-ms-fill-upper {
...
}
input[type="range"]::-ms-track {
...
}
input[type="range"]::-ms-thumb {
...
}
input[type="range"]::-ms-tooltip {
...
}
Second, the => arrow function in JavaScript is not supported in IE. You could use the Babel's translation to make it compatible with IE.
So the final code is like this:
var _R = document.querySelector('[type=range]');
_R.style.setProperty('--val', +_R.value);
_R.style.setProperty('--max', +_R.max);
_R.style.setProperty('--min', +_R.min);
document.documentElement.classList.add('js');
_R.addEventListener('input', function(e) {
_R.style.setProperty('--val', +_R.value);
}, false);
input:focus {
outline: none;
}
.slider {
-webkit-appearance: none;
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--val) - var(--min))/var(--range));
--sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em));
margin: 0;
padding: 0;
width: 100%;
height: 1.5em;
background: transparent;
font: 1em/1 arial, sans-serif;
border: none;
}
.slider,
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
}
.slider::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
width: 12.5em;
height: 0.5em;
background: #ccc;
}
.js .slider::-webkit-slider-runnable-track {
background: linear-gradient(#7b1c1a, #7b1c1a) 0/var(--sx) 100% no-repeat #ccc;
}
.slider::-moz-range-track {
box-sizing: border-box;
border: none;
height: 0.5em;
background: #ccc;
}
.slider::-moz-range-progress {
height: 0.5em;
background: #7b1c1a;
}
.slider::-webkit-slider-thumb {
position: relative;
z-index: 99;
margin-top: -0.550em;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #7b1c1a;
}
.slider::-moz-range-thumb {
position: relative;
z-index: 99;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #7b1c1a;
}
#tickmarks {
display: flex;
justify-content: space-between;
padding: 0 10px;
}
#tickmarks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 4px;
height: 4px;
background: green;
color: green;
border-radius: 100%;
line-height: 54px;
top: -34px;
left: 3px;
z-index: 0;
}
input[type="range"]::-ms-fill-lower {
background: #7b1c1a;
}
input[type="range"]::-ms-fill-upper {
background: transparent;
}
input[type="range"]::-ms-track {
height: 7px;
border: 1px solid #bdc3c7;
background-color: #ccc;
}
input[type="range"]::-ms-thumb {
position: relative;
z-index: 99;
margin-top: 0;
box-sizing: border-box;
border: none;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #7b1c1a;
}
input[type="range"]::-ms-tooltip {
display: none;
}
<div class="slidecontainer">
<input type="range" min="5" max="20" value="10" step='2.5' class="slider" id="myRange" list='tickmarks'>
<div id="tickmarks">
<p>5</p>
<p>7.5</p>
<p>10</p>
<p>12.5</p>
<p>15</p>
<p>17.5</p>
<p>20</p>
</div>
</div>
Besides, here's a very useful article about styling range slider across multiple browsers, you could also check it.

Categories