CODEWITHSUNDEEP
javascripthtmlcsssliderrangeslider
Fluffy Ribbit
Fluffy Ribbit

Reputation: 341

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

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?

Upvotes: 3

Views: 1847

Answers (2)

Fluffy Ribbit
Fluffy Ribbit

Reputation: 341

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;
}

Upvotes: 2

Sapphire_Brick
Sapphire_Brick

Reputation: 1682

Simple:

document.getElementsByClassName("quiz-slider")[0].value = 2;

Id and tag name selectors also work. here is the complete code: 

  document.getElementsByClassName("quiz-slider")[0].value = 2;
 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;
}
<!doctype html>
<html>
  <body>
    <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>
  </body>
</html>

Upvotes: 0

Related Questions