CODEWITHSUNDEEP
cssfirefoxslider
Greg
Greg

Reputation: 512

Slider CSS issue in firefox

I am currently developing an application for my company that requires the use of a slider.

when viewing the slider on chrome and even Edge, the slider appears as it should do, however when I view the slider on Firefox there appears to be a white line that runs all the way through the center of the slider.

My current css code for this slider is:

   #slidecontainer {
       width: 100%;
   }

   .slider {
       -webkit-appearance: none;
       width: 100%;
       height: 25px;
       background: #d3d3d3 ;
       outline: none;
       opacity: 1;
       -webkit-transition: .2s;
       transition: opacity .2s;
       margin-bottom:10px;
       border-radius: 5px;
   }

   .slider:hover {
       opacity: 1;
   }

   .slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       width: 25px;
       height: 25px;
       background: #989898 ;
       cursor: pointer;
       border-radius: 5px;
   }

   .slider::-moz-range-thumb {
       width: 25px;
       height: 25px;
       background: #DFDFDF ;
       cursor: pointer;
   }

Does any one know how I could fix this issue?

Check this js-fiddle: https://jsfiddle.net/rm6qsc1z/

Thanks

Upvotes: 1

Views: 1324

Answers (2)

John Smith
John Smith

Reputation: 3615

I'm not sure if this has changed over the years but the accepted answer no longer works. The new/correct (personally tested) answer is:

input[type=range]::-moz-focus-outer {
    border: 0;
}

Upvotes: 1

JasonB
JasonB

Reputation: 6368

You need to use the non-standard pseudo-element ::range-track Add this to the css of your fiddle:

input[type=range]::-moz-range-track {
  background-color: transparent;
}

Upvotes: 4

Related Questions