CODEWITHSUNDEEP
csshtml
user9695254
user9695254

Reputation:

rangeslider thumb behind on track for firefox browser only..how to fix it ? my code given below

hi am using two values of range slider itz fine to working on chrome and safari but mozilla browser not support am try my best can't solve this problem

input[type=range]:nth-child(1)::-moz-range-thumb {
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-moz-range-thumb {
  background-color: green;
 
}
input[type=range]{
  position:absolute;
}
<input type="range" min="0" max="100" step="5" value="20"/>
<input type="range" min="0" max="100" step="5" value="90"/>

Upvotes: 0

Views: 1826

Answers (2)

Paulina Trąd
Paulina Trąd

Reputation: 1

input[type="range"] {
 pointer-events: none;
}

input[type=range]::-moz-range-thumb 
{
 z-index: 10; 
 pointer-events: all;
}

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

See here:http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

::-moz-range-thumb to FIREFOX

::-webkit-slider-runnable-track to CHROME, SAFARI, OPERA

::-ms-thumb to INTERNET EXPLORER 10 +

And do not use:

input[type=range]{
  position:absolute;
}


input[type=range]:nth-child(1)::-moz-range-thumb {
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-moz-range-thumb {
  background-color: green;
 
}

 input[type=range]:nth-child(1)::-webkit-slider-runnable-track {
  background-color: blue;
  z-index:999;
}
 input[type=range]:nth-child(2)::-webkit-slider-runnable-track {
  background-color: green;
 
}
input[type=range]:nth-child(1)::-ms-thumb{
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-ms-thumb {
  background-color: green;
 
}
<input class="range1" type="range" min="0" max="100" step="5" value="20"/>
<input class="range2" type="range" min="0" max="100" step="5" value="90"/>

Upvotes: 1

Related Questions