I am making a website that has 2 separate range sliders using html, css and javascript. I am having real difficulty getting the styling to remain consistent across all browsers.
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.
This is my complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
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;
}
</style>
<!--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>
<script type="text/javascript">
// ===== 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();
</script>
</body>
</html>