hey guys I'm creating a Slider Price input
and I have two ranges one from the left side and the right side, they both are connected to each other
but they touch each other, how I can create limited space between them at least 50$
so the right does not pass the left and the left not pass the right
and to not merge?
(function() {
const parent = document.querySelector('.range-slider');
if (!parent) {
return;
}
const rangeS = parent.querySelectorAll('input[type="range"]'),
numberS = parent.querySelectorAll('input[type="number"]');
rangeS.forEach((el) => {
el.oninput = () => {
let slide1 = parseFloat(rangeS[0].value),
slide2 = parseFloat(rangeS[1].value);
if (slide1 > slide2) {
[slide1, slide2] = [slide2, slide1];
}
numberS[0].value = slide1;
numberS[1].value = slide2;
}
});
numberS.forEach((el) => {
el.oninput = () => {
let number1 = parseFloat(numberS[0].value),
number2 = parseFloat(numberS[1].value);
if (number1 > number2) {
let tmp = number1;
numberS[0].value = number2;
numberS[1].value = tmp;
}
rangeS[0].value = number1;
rangeS[1].value = number2;
}
});
})();
.range-slider {
width: 480px;
margin: auto;
text-align: center;
position: relative;
height: 6em;
}
.range-slider svg,
.range-slider input[type="range"] {
position: absolute;
left: 0;
bottom: 0;
}
input[type="number"] {
border: 1px solid #ddd;
text-align: center;
font-size: 1.6em;
}
input[type="number"]:invalid,
input[type="number"]:out-of-range {
border: 2px solid #ff6347;
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: #2497e3;
}
input[type="range"]:focus::-ms-fill-lower {
background: #2497e3;
}
input[type="range"]:focus::-ms-fill-upper {
background: #2497e3;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: #2497e3;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type="range"]::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: #2497e3;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type="range"]::-moz-range-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
}
input[type="range"]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
background: #2497e3;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type="range"]::-ms-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
}
<div class="range-slider">
<span>from <input type="number" value="3000" min="0" max="100000" step="500"> to <input type="number" value="75000" min="0" max="100000" step="500"></span>
<input value="3000" min="0" max="100000" step="500" type="range">
<input value="50000" min="0" max="100000" step="500" type="range">
<svg width="100%" height="24">
<line x1="4" y1="0" x2="480" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line>
</svg>
</div>
Related
I have a .button:hover thing in my css code, but I want that code to be canceled for five seconds when my button is pressed? My code is below.
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
}
/*function ok() {
document.getElementById("copied").innerHTML = "Hello World";
}
*/
/*function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}*/
body {
margin-top: 10px;
margin-left: 20px;
display: flex;
}
.form {
margin-right: 20px;
background: #ffffff;
position: relative;
}
.input {
height: 700px;
width: 600px;
margin-top: 15px;
outline: none;
font-size: 26px;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
border-radius: 10px;
margin-top: 0px;
padding-top: 5px;
padding-left: 10px;
}
.otput {
height: 695px;
width: 620px;
outline: none;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
border-radius: 10px;
outline: none;
margin-left: 10px;
}
.output {
height: 650px;
width: 512px;
outline: none;
font-size: 26px;
resize: none;
outline: none;
border: none;
padding: 0px;
margin-top: 5px;
margin-left: 10px;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
/*margin-left: 1134px;*/
font-size: 22px;
cursor: pointer;
position: absolute;
}
.speech-bubble {
height: 20px;
width: 150px;
color: white;
font-size: 20px;
text-align: left;
position: relative;
background: #4CAF50;
border-radius: 1px;
padding: 10px 10px 10px 5px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: none;
margin-top: 35px;
margin-left: 630px;
}
.speech-bubble:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 9px solid transparent;
border-right-color: #4CAF50;
border-left: 0;
margin-top: -9px;
margin-left: -9px;
}
.button:hover + .speech-bubble {
transform: translateY(-690px);
display: block;
}
.button:hover + .speech-bubble:after {
display: block;
}
::selection {
color: black;
background: lightblue;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:hover {
width: 20px;
}
::-webkit-scrollbar-thumb {
background: #888;
}
/*.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 170px;
height: 50px;
padding: 10px;
position: relative;
margin: 10% auto;
/*padding: 2rem;*/
/*background: #fff;
color: #333;
}
.modal-window .copy{
font-size: 20px;
}*/
<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<textarea class="input" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>
<form class="otput">
<textarea class="output" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction()">
<p class="speech-bubble">click to copy text</p>
<!--p id="copied" class="copied"></p-->
</form>
<script src="index.js"></script>
</body>
</html>
You can add a class on click and use it to set display:none for the speech buble .
possible example
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction(el) { //update : el
el.classList.add('clicked');// update
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
setTimeout( () => el.classList.remove('clicked'),5000);//Oups, needed : update to recover hover behavior after 5s
}
/*function ok() {
document.getElementById("copied").innerHTML = "Hello World";
}
*/
/*function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}*/
body {
margin-top: 10px;
margin-left: 20px;
display: flex;
}
.form {
margin-right: 20px;
background: #ffffff;
position: relative;
}
.input {
height: 700px;
width: 600px;
margin-top: 15px;
outline: none;
font-size: 26px;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
border-radius: 10px;
margin-top: 0px;
padding-top: 5px;
padding-left: 10px;
}
.otput {
height: 695px;
width: 620px;
outline: none;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
border-radius: 10px;
outline: none;
margin-left: 10px;
}
.output {
height: 650px;
width: 512px;
outline: none;
font-size: 26px;
resize: none;
outline: none;
border: none;
padding: 0px;
margin-top: 5px;
margin-left: 10px;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
/*margin-left: 1134px;*/
font-size: 22px;
cursor: pointer;
position: absolute;
}
.speech-bubble {
height: 20px;
width: 150px;
color: white;
font-size: 20px;
text-align: left;
position: relative;
background: #4CAF50;
border-radius: 1px;
padding: 10px 10px 10px 5px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: none;
margin-top: 35px;
margin-left: 630px;
}
.speech-bubble:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 9px solid transparent;
border-right-color: #4CAF50;
border-left: 0;
margin-top: -9px;
margin-left: -9px;
}
.button:hover + .speech-bubble {
transform: translateY(-690px);
display: block;
}
.button:hover + .speech-bubble:after {
display: block;
}
.button.clicked + .speech-bubble {display:none}/* UPDATE HERE */
::selection {
color: black;
background: lightblue;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:hover {
width: 20px;
}
::-webkit-scrollbar-thumb {
background: #888;
}
/*.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 170px;
height: 50px;
padding: 10px;
position: relative;
margin: 10% auto;
/*padding: 2rem;*/
/*background: #fff;
color: #333;
}
.modal-window .copy{
font-size: 20px;
}*/
<textarea class="input" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>
<form class="otput">
<textarea class="output" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction(this)"><!-- update on onclick -->
<p class="speech-bubble">click to copy text</p>
<!--p id="copied" class="copied"></p-->
</form>
Create a new class called .clicked, which contains the styling you want to see when the button is clicked. Then add the class to the button for 5 seconds.
function clicked (button) {
button.classList.add('clicked');
setTimeout(
() => button.classList.remove('clicked'),
5000);
}
button:hover.clicked {
background-color: red;
}
button:hover.clicked + .speech-bubble {
color: blue;
background-color: #aaa;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="m-4">
<button class="btn btn-primary" onclick="clicked(this);">Sample Button</button>
<p class="speech-bubble">click to copy text</p>
</div>
Okay I don't have a lot of experience with JS or JQuery, so I'm not sure where to go from here. I want the listed numbers to adjust as the slider moves. The first number should be the slider total x 30 minutes, with the total being rounded to the nearest hour. And the second number should be the slider total x 5 minutes, with the total being rounded to the nearest hour as well.
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
.range-slider {
margin: 60px 0 0 0%;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>How many quotes do you currently do a month?</h5>
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
<br>
<ul class="list-inline">
<li class="list-inline-item">
<!-- This part = range value x 30 minutes rounded into hours-->
<p>Time Spent On Quotes NOW: <strong>5 Hours</strong></p>
</li>
<li class="list-inline-item">
<!--This part = range value x 5 minutes rounded into hours-->
<p>Time Spent on Quotes with app: <strong>2 Hours</strong></p>
</li>
</ul>
You may simplify your code taking the full advantage of jQuery.
For the computation you can use .text( function ). Inside this function you can do your math operations.
A sample snippet:
var rangeSlider = function () {
var range = $('.range-slider__range');
range.on('input', function () {
$(this).next().html(this.value);
var fv = +this.value;
var nobj = $(this).closest('.range-slider').nextAll('.list-inline:first');
nobj.find('.list-inline-item:first').find('strong').text(function (idx, txt) {
return (fv < 13) ? (fv * 30) + ' Minutes' : Math.floor((fv * 30) / 60) + ' Hours';
});
nobj.find('.list-inline-item:last').find('strong').text(function (idx, txt) {
return (fv < 13) ? (fv * 5) + ' Minutes' : Math.floor((fv * 5) / 60) + ' Hours';
});
}).trigger('input');
};
rangeSlider();
.range-slider {
margin: 60px 0 0 0%;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>How many quotes do you currently do a month?</h5>
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
<br>
<ul class="list-inline">
<li class="list-inline-item">
<!-- This part = range value x 30 minutes rounded into hours-->
<p>Time Spent On Quotes NOW: <strong>5 Hours</strong></p>
</li>
<li class="list-inline-item">
<!--This part = range value x 5 minutes rounded into hours-->
<p>Time Spent on Quotes with app: <strong>2 Hours</strong></p>
</li>
</ul>
I created a jsfiddle showing a simple range slider, with a max range of 4.
What I'm trying to achieve is to animate the number in the output, so for example if you're currently at 1 and you choose 4, 1 will go down and fade out, while 4 will come from the top and fade in. On the other hand, if you choose a lower number, the opposite will happen.
Thanks ahead for your help!
jsfiddle: https://jsfiddle.net/hm0gxs54/12/
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="range-slider-wrap range-slider-lg">
<input class="range-slider ng-valid ng-dirty ng-touched" step="1" type="range" id="range-slider" min="1" max="4" data-tooltip-top="true" aria-valuenow="3" aria-valuemin="1" aria-valuemax="4">
<output class="range-slider-output num" id="range-slider-output" for="range-slider"></output>
</div>
</div>
</div>
</div>
</div>
CSS
.range-slider-output {
position: relative;
display: inline-block;
padding: 0.2em 0.75em 0.25em;
color: #fff;
text-align: center;
background: #666;
border-radius: 3px;
width: 100%;
left: calc(50%);
flex: 0 0 5%;
align-self: center;
margin: 0;
font-size: 28px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -92px;
}
.range-slider-output::before {
position: absolute;
top: 50%;
left: 0;
content: "";
}
.range-slider-lg .range-slider-output::before {
top: 48px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #666 transparent transparent transparent;
transition: all 0.7s ease-out;
}
.range-slider-wrap {
min-width: 100px;
}
input[type='range'] {
width: 100%;
cursor: pointer;
padding-top: 90px;
}
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
-webkit-appearance: none;
padding: 0 0.5rem;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
-webkit-appearance: none;
}
input[type='range']::-moz-range-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
}
JS
$(function() {
var slider = document.getElementById("range-slider");
var output = document.getElementById("range-slider-output");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
Here, i want to put some animation on input type range thumb.
here i done all the thing but i am not find the solution of animation effect on hover here is the sample example and My code..
Please give solution.
Here is example that exactly what i want.
#import 'bourbon';
$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #00BCD4;
$thumb-width: 18px;
$thumb-height: 18px;
$thumb-radius: 50%;
$thumb-background: #00BCD4;
$thumb-box-shadow: 2px 2px 1px 10px #00BCD4;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;
#function makelongshadow($color, $size) {
$val: 5px 0 0 $size $color;
#for $i from 6 through $slider-width-number {
$val: #{$val}, #{$i}px 0 0 $size #{$color};
}
#return $val;
}
div {
height: 100px;
display: flex;
justify-content: center;
}
input {
align-items: center;
appearance: none;
background: none;
cursor: pointer;
display: flex;
height: 100%;
min-height: 50px;
overflow: hidden;
width: $slider-width;
&:focus {
box-shadow: none;
outline: none;
}
&::-webkit-slider-runnable-track {
background: $background-filled-slider;
content: '';
height: $slider-height;
pointer-events: none;
}
&::-webkit-slider-thumb {
#include size($thumb-width $thumb-height);
appearance: none;
background: $thumb-background;
border-radius: $thumb-radius;
box-shadow: makelongshadow($background-slider, $shadow-size);
margin-top: $fit-thumb-in-slider;
border: $thumb-border;
}
&::-moz-range-track {
width: $slider-width;
height: $slider-height;
}
&::-moz-range-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
position: relative;
}
&:active::-webkit-slider-thumb {
transform: scale(2);
}
&::-moz-range-progress {
height: $slider-height;
background: $background-filled-slider;
border: 0;
margin-top: 0;
}
&::-ms-track {
background: transparent;
border: 0;
border-color: transparent;
border-radius: 0;
border-width: 0;
color: transparent;
height: $slider-height;
margin-top: 10px;
width: $slider-width;
}
&::-ms-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
}
&::-ms-fill-lower {
background: $background-filled-slider;
border-radius: 0;
}
&::-ms-fill-upper {
background: $background-slider;
border-radius: 0;
}
&::-ms-tooltip {
display: none;
}
}
<div>
<input type="range" min="0" max="100" value="40"/>
</div>
Here is the Codepen link:
https://codepen.io/anon/pen/qPpRJp
You can also edit Codepen
Here is what exactly you wanted. if you want more modification, go and see the documentation here https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
/* Special styling for WebKit/Blink */
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 10;
height: 15px;
width: 15px;
border-radius: 50%;
background: #3399cc;
cursor: pointer;
margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
transition : all .3s;
border:0;
}
input[type=range]:hover::-webkit-slider-thumb{
box-shadow: 0px 0px 0px 4px rgba(51, 153, 204, 0.49);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #3071a9;
}
<div>
<input type="range" min="0" max="100" value="40"/>
</div>
I have a speaker icon besides my volume slider, and I would like the icon to change when the volume value is at 0, to a second (muted) speaker icon. I've tried different variations which didn't work. How do I do that? Thanks!
var volumeslider;
volumeslider = document.getElementById("volumeslider");
// Add Event Handling
volumeslider.addEventListener("mousemove", setvolume);
// Functions
function setvolume(){
audio.volume = volumeslider.value / 100;
}
input[type=range] {
-webkit-appearance: none;
display: inline-block;
vertical-align: top;
width: 60%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #666666;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #666666;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<img src="https://maxcdn.icons8.com/Android/PNG/48/Mobile/speaker-48.png" width="25" height="32">
Use JQs attr method to just swap the image source. Also, make sure the src path to the images is relative to the HTML document if you are using an external JS document.
JS:
volumeslider.addEventListener("mousemove", checkMute);
//check for mute each time the slider is dragged.
function checkMute(){
if (audio.volume == 0){
$( ".speaker" ).attr("src", "images/speaker.png");
}else{
$( ".speaker" ).attr("src", "images/speakermute.png");
}
}