0

Has anyone ever managed to get a Multi Range Input Slider working in Internet Explorer just with HTML and CSS ?

I can do it easily in Firefox and Chrome but with Internet Explorer I can not.

I have added my HTML and CSS below, you will notice the left thumb will not move on the slider

.slider{
    -ms-appearance: none;
     position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
      background-color: transparent;
    width: 80%;
    height: 5px;
    pointer-events: all; 
}
<input class ="slider"  type="range" value="0" min="0" max="1000000" step="10000"/>
<input class ="slider" type="range" value="1000000" min="0" max="1000000" step="10000"/>
mister_cool_beans
  • 1,441
  • 1
  • 8
  • 19

1 Answers1

0

You could try the code below, it can work well in IE 11:

body {
  min-height: 100px;
}

div {
  display: flex;
}

input {
  flex: 1 0 0;
  min-width: 0;
  padding: 0;
  margin: -2px;
}

input::-webkit-slider-thumb {
  margin: 0;
  padding: 0;
}

#a {
  direction: rtl;
}
<div>
  <input id="a" type="range" min="0" max="10" value="0" />
  <input id="b" type="range" min="11" max="20" value="20" />
</div>

Result in IE:

enter image description here

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • thank you for your response however that is only putting 2 different sliders left and right of each other on the same line. The slider I have above is very different, it effectively will act as one slider where the thumbs can be dragged from one end of the slider bar to the other end of the slider bar, the thumbs do not stop half way on the slider. Also webkit-slider-thumb is not for styling the range input on internet explorer, that particular CSS property is used for google chrome and safari and opera. – mister_cool_beans Jun 26 '20 at 10:24
  • Your code sample above is putting two sliders together and only one thumb can work even in Chrome. You could refer to [this polyfill](https://leaverou.github.io/multirange/) for multi range in browsers. It seems to meet your requirement. But it also uses javascript. – Yu Zhou Jun 29 '20 at 02:25
  • No I don't want to use javascript. I only want to use HTML and CSS as per my original question. You are incorrect regards to only one thumb working in chrome as I have already stated in my original question I can do it easily in Chrome and Firefox. – mister_cool_beans Jun 29 '20 at 20:11
  • You could refer to the accepted answer in [this thread](https://stackoverflow.com/questions/4753946/html5-slider-with-two-inputs-possible). I think there's no way to achieve this in IE without javascript. The simplest way is to use JQuery slider. – Yu Zhou Jul 01 '20 at 08:01
  • Thanks for your feedback, I am going to ditch support for IE. – mister_cool_beans Jul 01 '20 at 20:39