KPC
Kevin Powell - Community•2w ago
mmjjrr

Style range slider

I'm styling a single-thumb <input type="range"> slider using SCSS. A lot of my styles are duplicated across ::-webkit-slider-thumb and ::-moz-range-thumb, so I tried combining them using a comma selector—but then the styles stopped applying. Is that a WebKit vs. Mozilla thing? Also, I’m struggling to add proper :hover and :focus effects to both the slider thumb and the filled track (that is made possible with the border-image trick). Here’s the React component: 
<input
  className="slider"
  type="range"
  min="1"
  max="30"
  step="1"
  value={simulationResultCount}
  onInput={(e) =>
    onSimulationResultCountClicked(Number(e.target.value))
  }
/>
<input
  className="slider"
  type="range"
  min="1"
  max="30"
  step="1"
  value={simulationResultCount}
  onInput={(e) =>
    onSimulationResultCountClicked(Number(e.target.value))
  }
/>
And here are the SCSS styles: 
.slider {
  width: 207px;
  height: 100%;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

// WebKit thumb
.slider[type="range" i]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  -webkit-appearance: none;
  appearance: none;
}

// Firefox thumb
.slider[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  appearance: none;
}
.slider {
  width: 207px;
  height: 100%;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

// WebKit thumb
.slider[type="range" i]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  -webkit-appearance: none;
  appearance: none;
}

// Firefox thumb
.slider[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  appearance: none;
}
No description
1 Reply
ἔρως
ἔρως•2w ago
you can use a placeholder selector for this for example: 
.slider[type="range"] {
    %range-thumb {
        //styles go here
    }
    
    &::-moz-range-thumb {
        @extend %range thumb;
    }

    //repeat for other pseudoelements
}
.slider[type="range"] {
    %range-thumb {
        //styles go here
    }
    
    &::-moz-range-thumb {
        @extend %range thumb;
    }

    //repeat for other pseudoelements
}
or you can try to @extend the pseudo-element

Did you find this page helpful?