How to make the thumb of a slider move all the way to the end?

Question

Basically, I want a range slider that works well for true and false.

fieldset > * {
  vertical-align: middle;
}

.quiz-label-left, .quiz-label-right{
  display: inline-block;
  width: 50px;
  padding: 2px;
  text-align: center;
}

.quiz-slider {
  -webkit-appearance: none;
  display: inline-block;
  width: 100px;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.quiz-slider:hover {
  opacity: 1;
}

.quiz-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

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

.slider-div {
  width: 100%;
  margin: 0 auto;
}

<fieldset>
<span class="quiz-label quiz-label-left">TRUE</span>
<input type="range" class="quiz-slider" name="quiz-slider" min="0" max="2" step="1" value="1">
<span class="quiz-label quiz-label-right">FALSE</span>
</fieldset>

        

The idea was to use 2 as true, 0 as false, and 1 as the default. The problem is, with such a small range, the thumb doesn't move very much. Ideally, I'd have the thumb move all the way to the end for either answer. Does anyone know how to do this?

Answer 1

So, apparently what was happening was that the slider was inheriting a padding from a selector

.quiz-card * {
  padding: 0px 30px;
}

This was causing my thumb to have a tiny range in which to move. Setting the slider's padding to 0 fixed it.

.quiz-slider {
  -webkit-appearance: none;
  display: inline-block;
  width: 100px;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  padding: 0;
}