0

I have one slider in page which is working perfectly in chrome browser but not working in IE or firefox, But I want this to work on all browsers (IE, firefox and chrome). And also I have written javascript oninput() function which I want it to run on all the browsers mentioned above.

<html>
<head>
<style>
input[type=range] {
-webkit-appearance: none;
background-color: transparent;
width: 300px;
height: 20px;
  padding-top:10px;
  overflow:hidden;
  display: inline-block;
  vertical-align: middle;
}
input[type=range]:focus{
  outline:none;
}
input[type="range"]::-webkit-slider-thumb {
  position:relative;
     -webkit-appearance: none;
    cursor:pointer;
    background-color: #f1f1f1;
    width: 10px;
    height: 30px;
    box-shadow: 1px 5px 10px -1px rgba(0, 0,0.2),
    -25px 0 0 20px rgba(0,0,255,0.3),
    -75px 0 0 20px rgba(0,0,255,0.3),
    -125px 0 0 20px rgba(0,0,255,0.3),
    -175px 0 0 20px rgba(0,0,255,0.3),
    -225px 0 0 20px rgba(0,0,255,0.3),
    -275px 0 0 20px rgba(0,0,255,0.3),
    -325px 0 0 20px rgba(0,0,255,0.3);
  z-index:2;
}
input[type="number"] {
    width: 80px;
    height: 20px;
        background-color: #f1f1f1;
}
input[type=number]:focus{
  outline:none;
}
.number-wrapper {
    position: relative;
}
</style>
</head>
<body>
<form align=center>
Length<br><input type="range" id="Minlen_range" name="MinlenRange" min="1" max="100" value=10 oninput="this.form.MinlenInput.value=this.value" />
<input type="number" id="Minlen_text" name="MinlenInput" min="1" max="100" value=10 oninput="this.form.MinlenRange.value=this.value">
</form>
</body>
</html>
Charan Raj
  • 17
  • 6
  • Possible duplicate of [What is WebKit and how is it related to CSS?](https://stackoverflow.com/questions/3468154/what-is-webkit-and-how-is-it-related-to-css) – Morpheus Sep 13 '19 at 09:41

1 Answers1

0

It's because you are using the -webkit-slider-thumb. It is for Webkit based clients, the IE and Firefox uses other motor, they ignores this.

B. Ma
  • 221
  • 2
  • 15