I am making a website that has 2 separate range sliders using html, css and javascript. I am having real difficulty getting the range slider to work for CHROMIUM.
I have spent hours searching and experimenting with different code but cannot get the colored range slider bar to work in chromium web browser. It works great in Firefox. Any help on cross browser functioning for range sliders would be most grateful-basically it seems that the ::-moz-range-progress wont work on chromium. Is the range slider not compatible with Chromium?
// ===== Range slider ====
var rangeSlider = function () {
var slider = $(".range-slider"),
range = $(".rs"),
value = $(".rs");
slider.each(function () {
value.each(function () {
var value = $(this).prev().attr("value");
$(this).html(value);
});
range.on("input", function () {
$(this).next(value).html(this.value);
});
});
};
rangeSlider();main {
display: flex;
justify-content: center;
}
input[type="range"] {
height: 10px;
-webkit-appearance: none;
margin: 10px 0;
width: 500px;
}
/*------------Round thumb------------*/
input[type="range"]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 1px var(--darkgray);
border: 1px solid var(--darkgray);
height: 18px;
width: 18px;
border-radius: 15px;
background-color: var(--orangeclr);
cursor: pointer;
}
input[type="range"]:focus {
outline: none;
}
/*Chrome*/
input[type="range"]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px var(--ltgray);
border: 1px solid var(--ltgray);
height: 18px;
width: 18px;
border-radius: 15px;
background-color: var(--orangeclr);
cursor: pointer;
-webkit-appearance: none;
margin-top: -8px;
}
input[type="range"]::-moz-range-thumb {
box-shadow: 1px 1px 1px var(--ltgray);
border: 1px solid var(--ltgray);
height: 18px;
width: 18px;
border-radius: 15px;
background: var(--orangeclr);
cursor: pointer;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px var(--black);
background: #f1f1f1;
border-radius: 15px;
border: 0px solid var(--darkgray);
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: var(--orangeclr);
height: 10px !important;
border-radius: 15px;
}<!doctype html>
<html lang="en">
<head>
<!--For search select-->
<link href="assets/css/select2.css" rel="stylesheet" />
<!--Jquery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- Custom CSS for this template -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
<link rel="stylesheet" href="assets/css/sass.css" />
</head>
<body>
<main>
<div>
<p>Price Range (£):</p>
<div class="range-slider">
<input class="rs" type="range" value="50000" min="50000" max="1000000" />
<p><span id="demo1" class="range-slider__value">50000</span></p>
</div>
</div>
<div class="slidecontainer text-dark text-center">
<p>Property Geo (m2):</p>
<div class="range-slider">
<input class="rs" type="range" value="250" min="40" max="12000" step="10" />
<p><span id="demo2" class="range-slider__value">40</span></p>
</div>
</div>
</main>
</body>
</html>
--mozis a Mozilla Firefox extension and other browsers ignore it.