For example if the user is at 22 in range slider then dont let user go down to 21 and so on. The user should only be able to scroll to the right side.
I am using range slider to select plans and I dont want user to downgrade plan thats why I want this functionality.
Is it possible?
https://jsfiddle.net/59xL36b8/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Round Range Slider</h1>
<div class="""slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
This should work for you.
Just don't let the value get beneath the minimum value.
var minValue = 0;
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function(e) {
if (slider.value > minValue) {
output.innerHTML = this.value;
minValue = this.value;
} else {
this.value = minValue;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Round Range Slider</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
</body>
</html>
You could maintain a variable which holds the previous value and prevents the user to set the value to one lower than what the variable holds.
var prev_value = 50 //For example;
slider.oninput = function(ev) {
if (parseInt(ev.target.value) < prev_value) {
ev.preventDefault();
this.value = prev_value;
}
output.innerHTML = this.value;
}
Here is a fiddle - https://jsfiddle.net/L5tgx8ys/1/
Related
I have a slider that works well, but it only allows for whole number values. I need one of the sliders on the page to allow half-step increments (eg., 1, 1.5, 2, 2.5, 3). Is there an easy way to do this?
Here is the CSS:
.slider, .slider2 {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #999;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover, .slider2:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb, .slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.slider::-moz-range-thumb, .slider2::-moz-range-thumb {
width: 35px;
height: 35px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
Here is the HTML:
<input name="newbelief" type="range" min="1" max="9" value="" class="slider2" id="newbelief">
Here is the javascript:
<script>
var slider = document.getElementById("oldbelief");
var output = document.getElementById("belief_value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
var slider2 = document.getElementById("newbelief");
var output2 = document.getElementById("belief2_value");
output2.innerHTML = slider2.value;
slider2.oninput = function() {
output2.innerHTML = this.value;
}
</script>
I needed to add a "step" value to the form. So it should look like this:
<input name="newbelief" type="range" min="1" max="9" step="0.5" value="" class="slider2" id="newbelief">
I'm working with the range input here I'm trying to add color to the slider thumb before I had tried using background gradient but unable to achieve the desired output. when if I remove max="5" then its working fine. below is my code
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
What you can do is to use a CSS linear-gradient() for the background of your range element. The gradient will look like this:
linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)
Where percentage is the abrupt transition point from your color green to transparent. To calculate this percentage, some math is required: you will want to calculate the relative value of the input element to its minimum and maximum values. This can be computed as such:
const percentage = (e.target.value - slider.min) / (slider.max - slider.min) * 100;
See proof-of-concept below:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
function updateGradient(rangeValue) {
const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
slider.style.backgroundImage = `linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)`;
}
// Update gradient onload
updateGradient(slider.value);
// Update gradient oninput
slider.addEventListener('input', (e) => {
output.innerHTML = e.target.value;
updateGradient(e.target.value);
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
Even better: Use CSS custom properties / variables
Even better: you don't have to hardcode the color value in your JS, if you just use CSS variables/custom properties. In this case, we simply pass the calculated percentage as a string to the --percentage custom property:
background-image: linear-gradient(90deg, #4CAF50 var(--percentage), transparent var(--percentage));
Then, in your JS, it is as simply as doing this:
const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
slider.style.setProperty('--percentage', percentage + '%');
See example below:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
function updateGradient(rangeValue) {
const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
slider.style.setProperty('--percentage', percentage + '%');
}
// Update gradient onload
updateGradient(slider.value);
// Update gradient oninput
slider.addEventListener('input', (e) => {
output.innerHTML = e.target.value;
updateGradient(e.target.value);
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background-color: #d3d3d3;
background-image: linear-gradient(90deg, #4CAF50 var(--percentage), transparent var(--percentage));
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
Adding box-shadow to your thumb and make overflow hidden of the slider class is doing the job.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: white;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
overflow:hidden;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: yellow;
cursor: pointer;
box-shadow: -407px 0 0 407px green;
z-index:2;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.input{
overflow:hidden;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
I am making a weather calculator by using JS range slider in webpage. I am testing the add up function. The problem is at line 122,
the code:
outRest.innerHTML = add(outT, outH);
When I move the humidity bar, the add up result will not update. However, if I use the followimg code, it hasn't problem:
outRest.innerHTML = parseInt(outT) + parseInt(outH);
var slider = document.getElementById("TEMP");
var outputTemp = document.getElementById("tempC");
var outputTemp2 = document.getElementById("tempF");
var slider2 = document.getElementById("HUMD");
var outputHumd = document.getElementById("humd");
var outRest = document.getElementById("test");
var outT = slider.value;
var outH = slider2.value;
var add = parseInt(outT) + parseInt(outH);
outRest.innerHTML = add;
outputTemp.innerHTML = slider.value;
outputTemp2.innerHTML = roundUp(CF(slider.value), 2);
slider.oninput = function() {
outputTemp.innerHTML = this.value;
outputTemp2.innerHTML = roundUp(CF(this.value), 2);
outT = this.value;
outRest.innerHTML = parseInt(outT) + parseInt(outH);
}
outputHumd.innerHTML = slider2.value;
slider2.oninput = function() {
outputHumd.innerHTML = this.value;
outH = this.value;
outRest.innerHTML = add(outT, outH);
}
function CF(CF) {
rest = (CF * (9 / 5)) + 32
return rest
}
function roundUp(num, precision) {
precision = Math.pow(10, precision)
return Math.ceil(num * precision) / precision
}
function add(T, H) {
rest = parseInt(T) + parseInt(H)
return rest
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style><style>.slider2 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider2::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<h1>Calculator</h1>
<p>Drag the slider to display the current value.</p>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" id="TEMP">
<p>Temperature: <span id="tempC"></span> ℃ (<span id="tempF"></span> °F)</p>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider2" id="HUMD">
<p>Humidity: <span id="humd"></span> %</p>
</div>
<div>
<p>Test: <span id="test"></span> %</p>
</div>
You are trying use add as a function,
outRest.innerHTML = add(outT, outH);
however it's a variable (You can remove this code).
var add = parseInt(outT) + parseInt(outH);
I can see that you have declared an add function already:
function add(T, H) {
rest = parseInt(T) + parseInt(H)
return rest
}
You can simply return the value if you have no other usage of that variable
function CF(CF) {
return (CF * (9 / 5)) + 32
}
function add(T, H) {
return parseInt(T) + parseInt(H);
}
Result:
var slider = document.getElementById("TEMP");
var outputTemp = document.getElementById("tempC");
var outputTemp2 = document.getElementById("tempF");
var slider2 = document.getElementById("HUMD");
var outputHumd = document.getElementById("humd");
var outRest = document.getElementById("test");
var outT = slider.value;
var outH = slider2.value;
//Remove this line
//var add = parseInt(outT) + parseInt(outH);
outRest.innerHTML = add;
outputTemp.innerHTML = slider.value;
outputTemp2.innerHTML = roundUp(CF(slider.value), 2);
slider.oninput = function() {
outputTemp.innerHTML = this.value;
outputTemp2.innerHTML = roundUp(CF(this.value), 2);
outT = this.value;
outRest.innerHTML = parseInt(outT) + parseInt(outH);
}
outputHumd.innerHTML = slider2.value;
slider2.oninput = function() {
outputHumd.innerHTML = this.value;
outH = this.value;
outRest.innerHTML = add(outT, outH);
}
function CF(CF) {
return (CF * (9 / 5)) + 32
}
function roundUp(num, precision) {
precision = Math.pow(10, precision)
return Math.ceil(num * precision) / precision
}
function add(T, H) {
return parseInt(T) + parseInt(H)
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style><style>.slider2 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider2::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<h1>Calculator</h1>
<p>Drag the slider to display the current value.</p>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" id="TEMP">
<p>Temperature: <span id="tempC"></span> ℃ (<span id="tempF"></span> °F)</p>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider2" id="HUMD">
<p>Humidity: <span id="humd"></span> %</p>
</div>
<div>
<p>Test: <span id="test"></span> %</p>
</div>
just remove this line
var add = parseInt(outT) + parseInt(outH);
as you can see, you have this error because javascript is expecting that you are using 'add' as a function not a variable it's because you are passing two arguments, the 'outT' and 'outH' variables.
TypeError: add is not a function
You can also directly get numeric value ( for type="number" / type="range" ...)
with inputElement.valueAsNumber
sample code
const calculForm = document.getElementById('calcul-form')
, CF = cf => (cf *9 /5 +32).toFixed(2)
;
function setTempHum()
{
let temp = calculForm.TEMP.valueAsNumber
, humd = calculForm.HUMD.valueAsNumber
;
calculForm.valTEMP.value = `${temp} ℃ -- ${CF(temp)} °F`
calculForm.valHUMD.value = `${humd} %`
calculForm.test.value = temp + humd
}
setTempHum() // first time
calculForm.oninput = setTempHum
fieldset { width: 80%; margin: .5em; padding: 1em;}
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<form id="calcul-form" onsubmit="return false">
<fieldset>
<input type="range" min="0" max="100" value="50" name="TEMP">
<p>Temperature : <output name="valTEMP"></output></p>
</fieldset>
<fieldset>
<input type="range" min="0" max="100" value="50" name="HUMD">
<p>Humidity : <output name="valHUMD"></output></p>
</fieldset>
<fieldset>
<p>Test : <output name="test"></output></p>
</fieldset>
</form>
Why is the text field completely empty upon load and stays empty regardless of my slider value?
Subquestion: Should they be linked? If I enter a value in the input text field, should the slider move accordingly?
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function()
{ output.innerHTML = this.value; }
.slidecontainer { width: 100%; }
.slider { -webkit-appearance: none; width: 100%; height: 25px;
background: #d3d3d3; outline: none; opacity: 0.7;
-webkit-transition: .2s; transition: opacity .2s; }
.slider:hover { opacity: 1; }
.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; }
<div class="slidecontainer">
<input type="range" min="1000" max="5000000"
value="250000" class="slider" id="myRange">
<input type="text" id="demo" value="">
</div>
Use code as below
Use .value instead innerHTML and use oninput="myFunction(this)" to #slide
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.value = slider.value;
function myFunction(x) {
output.value = x.value;
}
.slidecontainer { width: 100%; }
.slider { -webkit-appearance: none; width: 100%; height: 25px;
background: #d3d3d3; outline: none; opacity: 0.7;
-webkit-transition: .2s; transition: opacity .2s; }
.slider:hover { opacity: 1; }
.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; }
<div class="slidecontainer">
<input type="range" min="1000" max="5000000" oninput="myFunction(this)"
value="250000" class="slider" id="myRange"/>
<input type="text" id="demo" value=""/>
</div>
Subquestion:
Use onchange="setSlider(this)" when change #demo the slide will move when you click Enter or out from #demo
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.value = slider.value;
function myFunction(x) {
output.value = x.value;
}
function setSlider(x) {
slider.value= x.value;
}
.slidecontainer { width: 100%; }
.slider { -webkit-appearance: none; width: 100%; height: 25px;
background: #d3d3d3; outline: none; opacity: 0.7;
-webkit-transition: .2s; transition: opacity .2s; }
.slider:hover { opacity: 1; }
.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; }
<div class="slidecontainer">
<input type="range" min="1000" max="5000000" oninput="myFunction(this)"
value="250000" class="slider" id="myRange"/>
<input type="text" id="demo" value="" onchange="setSlider(this)"/>
</div>
Value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
For input change you can bind on change event on input obj
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.value = slider.value; // input have value not innerhtml
slider.oninput = function() {
output.value = this.value;
}
output.addEventListener("change", function() {
slider.value = this.value;
});
Here is my code, this outputs the slider on one row and then the label on the row below it. When id like them next to each other on the same row.
I've tried using the display value in both the label and the slider, but it doesn't seem to make any difference.
Any help would be appreciated. Thx in advance.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
#slidecontainer {
width: 70%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.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;
}
input {
display: inline-block;
}
label {
display: inline-block;
float: left;
}
<h1>Custom Range Slider</h1>
<p>Drag the slider to display the current value.</p>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<label>Value: <span id="demo" display=inline float=left></span></label>
</div>
Your .slider CSS class had width:100% set in it, leaving no room for the label. Decreasing that value solves the problem.
Also, your input and label CSS rules do not do anything helpful here, you should remove them.
Lastly, your span that holds the slider's value is invalid:
<span id="demo" display=inline float=left>
display and float are CSS properties, not HTML attributes and aren't set this way. Just remove them.
<!DOCTYPE html>
<html>
<style>
#slidecontainer {
width: 70%;
}
.slider {
-webkit-appearance: none;
width: 80%; /* <-- Problem was here when width is 100% */
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
/* This rule causes the label to vertically align properly */
label {
vertical-align:middle;
display:inline-block;
margin-bottom:1em;
}
.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;
}
</style>
<body>
<h1>Custom Range Slider</h1>
<p>Drag the slider to display the current value.</p>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<label>Value: <span id="demo"></span></label>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
It's pretty simple via Flexbox, I have added just 2 rows:
#slidecontainer {
width: 70%;
display: flex;
flex-direction: row;
}
And here is the snippet:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
#slidecontainer {
width: 70%;
display: flex;
flex-direction: row;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.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;
}
input {
display:inline;
}
label {
display:inline;
float: left;
width: 30%;
}
<h1>Custom Range Slider</h1>
<p>Drag the slider to display the current value.</p>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange" >
<label>Value: <span id="demo" display=inline float=left></span></label>
</div>