I want to make a slider that changes the dot size when the value changes.
So value 1 will be a size of 10px and value 100 will be size 100px.
How am a able to change the .slider::-webkit-slider-thumb height with javascript?
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: 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;
}
<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>
what I tried =
document.getElementById("myRange").style.webkitTransform = "height: 100px";
Okay, so, before answering the question:
::-webkit-slider-thumb is a pseudo element. Those elements are not part of the DOM. Therefore, changing them in JavaScript can get a bit hacky.
A proper solution would be completely replacing the thumb with another element.
Now to answer the question: You could inject styles into an <style> element with a given attribute when the slider value changes.
So you would add
<style data="test" type="text/css"></style>
to your header, then target the element and add CSS to it like that:
var style = document.querySelector('[data="test"]');
style.innerHTML = ".class { property: value; }";
This, combined with the code you provided at this link would be a solution to your problem.
Demo:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var style = document.querySelector('[data="test"]');
setData(slider.value);
slider.oninput = function() {
setData(this.value);
}
function setData(x){
output.innerHTML = x;
style.innerHTML = ".slider::-webkit-slider-thumb { width: " + x + "px !important; height: " + x + "px !important; }";
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider {
margin-top: 40px;
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
}
<style data="test" type="text/css"></style>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
Also: you said
So value 1 will be a size of 10px and value 100 will be size 100px.
If you want an approach like value 1 to 10 equals 10px and everything above value 10 is the actual value in pixels, you can change the line
style.innerHTML = "...";
to
style.innerHTML = ".slider::-webkit-slider-thumb { width: " + (x < 10 ? 10 : x) + "px !important; height: " + (x < 10 ? 10 : x) + "px !important; }";
A Live demo of this version can be found HERE
2022 - Use CSS variables
The accepted answer works, but it's a lot of code and hard to understand. This can be done a lot easier these days...
In your CSS just add a variable like this --sliderSize:
.slider {
--sliderSize: 25px; /* <---- Add this */
-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: var(--sliderSize); /* <---- Set the variable here */
height: var(--sliderSize); /* <--- and here */
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
Then in your JavaScript simply set the variable to whatever you want using setProperty:
const newSliderSize = '100px'; // this could be a passed in dynamic value, etc.
document.getElementById("myRange").style.setProperty('--sliderSize', newSliderSize);
Here is a working fiddle of it all put together:
const newSliderSize = '50px'; // this could be a passed in dynamic value, etc.
document.getElementById("myRange").style.setProperty('--sliderSize', newSliderSize);
.slider {
--sliderSize: 25px; /* <---- Add this */
-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: var(--sliderSize); /* <---- Set the variable here */
height: var(--sliderSize); /* <--- and here */
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<input type="range" min="1" max="100" id="myRange" class="slider" />
Related
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'm currently learning CSS and JS layouting. How do I make my MARKER always follow the SLIDER-HANDLE (cursor) wherever it goes like they were grouped as one?
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
}
<form>
<div class='slidecontainer' >
<div class='sliderticks'>
</div>
</div>
<div class='add-queston-btn'>
<img src='Images\pointmarker.png' data-quiz-number='2' z-index='2'>
</div>
</form>
Youc can set a position to image using Jquery
See fiddle
//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});
.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: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>
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;
});
I've styled a regular range slider using an example from w3schools. My goal is to send out a new value command to an external MQTT-based smarthome thing and show the old value as some kind of ghost-thumb first:
After the smarthome system confirms the new value, the bubble will be removed - but that's not my problem at this point. I would like to place the ghost between the background of the slider and the real-value-thumb, currently it looks like this:
Here you can see the result on JSFiddle, here's the code:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
// Show ghost slider
$('#slider_1_companion').css('left', 'calc('+ $(this).data('last-mqtt-value') / $(this).attr('max') +'* (100% - 20px))');
$('#slider_1_companion').css('display', 'block');
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
$('#slider_1_companion').css('display', 'none');
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
/*https://stackoverflow.com/a/46318225/1997890*/
.slider_wrapper {
position: relative;
width: 150px;
}
.slider_companion {
background-color: #ccc;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
top: calc(100% - 19px); /* for some reason this is not 20px (height of thumb) */
/* left: calc( PERCENTAGE * (100% - 20px)); /* add this line dynamically via jQuery */
display: none;
pointer-events: none; /*click-through*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<div id="slider_1_companion" class="slider_companion"></div>
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>
I would consider a box-shadow for the slider that you can adjust with CSS variable and no need for extra element and you will have the expected result.
Here is an idea:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
document.getElementById('slider_1_wrapper').style.setProperty("--c",
($(this).data('last-mqtt-value') - $(this).val() )*130 + 'px');
/*130 = 150 - 20 = width of wrapper - width of thumb*/
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
document.getElementById('slider_1_wrapper').style.setProperty("--c",0);
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider_wrapper {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>
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>