How to set min and max value in range input using CSS

Question

I have created a range slider using CSS and customized the as per my requirement. This is how it's looks like :

	.slidecontainer {
	  width: 18%;
	  pointer-events: none;
	}

	.slider {
	  -webkit-appearance: none;
	  width: 100%;
	  height: 30px;
	  background: #dadadaa3;
	  outline: none;
	  opacity: 0.7;
	  -webkit-transition: .2s;
	  transition: opacity .2s;
	  border-radius: 10px;
	}

	.slider:hover {
	  opacity: 1;
	}

	.slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 30px;
	  background: #4CAF50;
	  cursor: pointer;
	  pointer-events:auto;
	}

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

<div class="slidecontainer">
  <span>10</span><input type="range" min="10" max="100" value="40" class="slider" id="myRange"><span>100</span>
</div>

But I need to set the Minimum value inside the beginning of the range and set the Maximum value inside the end of the range using CSS.

Why do you need it set using CSS? You have tagged the question JavaScript, why can it not be set using JavaScript? — cmprogram
– cmprogram, Commented Oct 24, 2018 at 10:33
@cmprogram sorry that wash my mistake I updated my question and tag. — SethuNagaKarthik
– SethuNagaKarthik, Commented Oct 24, 2018 at 10:39
@YahyaEssam I have updated my question please check once for more clarification. — SethuNagaKarthik
– SethuNagaKarthik, Commented Oct 24, 2018 at 10:39

Yahya Essam · Accepted Answer · 2018-10-24 10:53:37Z

2

try to give .slidecontainer

position:relative;

and set the .min and .max spans as

position:absolute;

	.slidecontainer {
	  width: 18%;
          position:relative;
	  pointer-events: none;
	}

	.slider {
      
	  -webkit-appearance: none;
	  height: 30px;
	  background: #dadadaa3;
	  outline: none;
	  opacity: 0.7;
	  -webkit-transition: .2s;
	  transition: opacity .2s;
	  border-radius: 10px;
	}

	.slider:hover {
	  opacity: 1;
	}

	.slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  appearance: none;
	  width: 15px;
	  height: 30px;
	  background: #4CAF50;
	  cursor: pointer;
	  pointer-events:auto;
	}

	.slider::-moz-range-thumb {
	  width: 25px;
	  height: 25px;
	  background: #4CAF50;
	  cursor: pointer;
	}
        .min {
          position:absolute;
          left: 3px;
          top:8px;
        }
        .max {
         position:absolute;
         right: -12px;
         top: 8px;
        }

<div class="slidecontainer">
  <span class="min">10</span><input type="range" min="10" max="100" value="40" class="slider" id="myRange"><span class="max">100</span>
</div>

edited Oct 24, 2018 at 10:53

answered Oct 24, 2018 at 10:47

Yahya Essam

1,9122 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SethuNagaKarthik Over a year ago

This is exactly what I'm looking for Thank you.

Paulie_D · Accepted Answer · 2018-10-24 10:48:42Z

Perhaps like this:

.slidecontainer {
  width: 18%;
  pointer-events: none;
  margin: 1em auto;
  display: flex;
  flex-direction: column;
}

span:last-child {
  align-self: flex-end;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 30px;
  background: #dadada;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  position: relative;
}

.slider::before,
.slider::after {
  content: "";
  width: 10%;
  height: 100%;
  background: inherit;
  position: absolute;
}

.slider::before {
  right: 100%;
  border-radius: 15px 0 0 15px;
}

.slider::after {
  left: 100%;
  border-radius: 0 15px 15px 0;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10%;
  height: 30px;
  background: #4CAF50;
  cursor: pointer;
  pointer-events: auto;
}

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

<div class="slidecontainer">
  <span>10</span><input type="range" min="10" max="100" value="10" class="slider" id="myRange"><span>100</span>
</div>

<div class="slidecontainer">
  <span>10</span><input type="range" min="10" max="100" value="100" class="slider" id="myRange"><span>100</span>
</div>

Collectives™ on Stack Overflow

How to set min and max value in range input using CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related