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?

After turning your code into a snippet, the slider clicks to either side immediately, what is the issue? Is ti caused by the fact you never opened your `
` tag? — Libra, Nov 19 '19 at 19:00
No, that's a bug in a me copy-pasting. Not sure what the issue is, then. :/ — Fluffy Ribbit, Nov 19 '19 at 19:02
The thumb is moving a very tiny amount, as if it expects the range to be 100 or something. — Fluffy Ribbit, Nov 19 '19 at 19:06
Yeah, the code you supplied [works this way already](https://codepen.io/Libruhh/pen/gOOqedd). — Libra, Nov 19 '19 at 19:08
Sigh. It was a bug in my css. It was inheriting padding of 30 from another selector. Setting padding to 0 fixes it. -_- Man I hate CSS> — Fluffy Ribbit, Nov 19 '19 at 19:13

Fluffy Ribbit · Accepted Answer · 2019-11-19T19:19:17.097

2

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

edited Nov 19 '19 at 19:19

answered Nov 19 '19 at 19:17

Fluffy Ribbit

316
1
4
15

Not for two days, apparently. Sorry guys. – Fluffy Ribbit Nov 19 '19 at 19:19
Oh yeah, damn, SO is weird. – Libra Nov 19 '19 at 19:20

Sapphire_Brick · Answer 2 · 2019-11-19T19:09:12.393

0

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>

edited Nov 19 '19 at 19:09

answered Nov 19 '19 at 19:06

Sapphire_Brick

1,560
12
26

How is the behavior different than the supplied code? – Libra Nov 19 '19 at 19:08
It moves the slider to the end; – Sapphire_Brick Nov 19 '19 at 19:09
After turning his code into a snippet, it does too. See [here](https://codepen.io/Libruhh/pen/gOOqedd). – Libra Nov 19 '19 at 19:10
No, he said that 1 is the default, and your link seems to also use 1 as the default. – Sapphire_Brick Nov 19 '19 at 19:12
That wasn't the issue, per his comment above: "The thumb is moving a very tiny amount, as if it expects the range to be 100 or something." – Libra Nov 19 '19 at 19:13
1

He should've wrote that in the title of his question. – Sapphire_Brick Nov 19 '19 at 19:14
I'll agree, it was a bit vague. – Libra Nov 19 '19 at 19:14
I'll delete my answer if somebody else claims that it doesn't answer the question, and indeed, I don't either have the problem he mentioned. – Sapphire_Brick Nov 19 '19 at 19:18

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

2 Answers2