How do i put the label and slider on the same line
Question
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>
2 answers
solution1
4 ACCPTED 2017-09-06 16:31:38
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>
solution2
1 2017-09-06 16:41:11
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.