range slider CSS issue in IE and Edge

range slider CSS issue in IE and Edge - javascript

I am creating a range slider for my site which needs to look same on all browser. I am having issue with IE and Edge now.
Issues facing with IE and Edge are:
Round slider thumb and hand pointer are not working.
border-radius:50%;
cursor: pointer;
IE adding a dividing line in slider track and border
Here is my code. I would like to know how to fix the issues.
$(function() {
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, ' +
'color-stop(' + val + ', orange), ' +
'color-stop(' + val + ', #C5C5C5)' +
')'
);
});
});
input[type="range"] {
-webkit-appearance: none;
-moz-apperance: none;
outline: none !important;
border-radius: 6px;
height: 8px;
width: 100%;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0.15, orange), color-stop(0.15, #C5C5C5));
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor: pointer;
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius: 50%;
transition: 100ms;
}
input[type='range']:hover::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor: pointer;
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius: 50%;
}
/*Firefox */
input[type="range"]::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
}
input[type="range"]:hover::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius: 50%;
cursor: pointer;
}
input[type=range]::-moz-range-track {
background: none;
}
/*IE and Edge */
input[type=range]::-ms-thumb {
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: hand;
}
input[type=range]::-ms-fill-upper {
background-color: #C5C5C5;
}
input[type=range]::-ms-fill-lower {
background-color: orange;
}
input[type=range]::-ms-range-track {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="1" max="100" step="1" value="15">
Fiddle:
https://jsfiddle.net/anoopcr/ssbx0anj/28/

Related

Issue changing CSS back to default using jquery

I can change other elements on the page using Jquery, but i can't seem to be able to toggle back to the default css class when it is using ::before..
Default Checkbox css in action
Checkbox Checked css in action
Now i have a button, that when its clicked, should reset my css to the default Checkbox - but it doesnt seem to work for me... The button stays green and it doesn't move to the left..
**
After button clicked example
**
CSS -
<style>
.checkbox {
appearance: none;
border: 2px solid #ccc;
border-color: red;
border-radius: 20px;
cursor: pointer;
height: 24px;
outline: none;
position: relative;
transition: 0.3s;
width: 37px;
}
.checkbox::before {
background: red;
border-radius: 50%;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 2px;
transition: 0.3s ease-in-out;
width: 15px;
}
.checkbox:checked::before {
background: green;
transform: translateX(18px);
}
.checkbox:checked {
border-color: green;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
.float-child-unknown {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
</style>
JS -
function outsideModalClick() {
$(document).ready(function() {
document.getElementById('button').onclick = function() {
$('.float-child').css('border', '2px solid red');
$('.iconShow').toggleClass('iconhide');
$('.checkbox:checked::before').toggleClass('.checkbox::before');
$('.checkbox:checked').toggleClass('.checkbox');
}
})
}
Edit - Still not working - css is not being applied

Styling seek slider

I have this video player here and I'm having trouble with something.
I'm Trying to make the seekslider show a different color after the slider thumb.
This is What I'm trying to achive
I looked everywhere and cannot find one that works and matches a the style I'm looking for, Is there any possible way to do this.
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
// Set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullscreenbtn = document.getElementById("fullscreenbtn");
// Add event listeners
playbtn.addEventListener("click",playPause,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
mutebtn.addEventListener("click",vidmute,false);
volumeslider.addEventListener("change",setvolume,false);
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/pause.png)";
playbtn.style.backgroundSize="100% 100%";
} else {
vid.pause();
playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/play.png)";
playbtn.style.backgroundSize="100% 100%";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
if(dursecs < 10){ dursecs = "0"+dursecs; }
if(curmins < 10){ curmins = "0"+curmins; }
if(durmins < 10){ durmins = "0"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.style.background = "url(file:///H:/SSEmery/player/unmute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
} else {
vid.muted = true;
mutebtn.style.background = "url(file:///H:/SSEmery/player/mute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
}
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
} else if(vid.webkitRequestFullScreen){
vid.webkitRequestFullScreen();
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
}
}
video#my_video {
top: 0px;
position: relative;
width: 100%;
height: 56.2225%;
}
div.time {
font-family: monospace;
color: #ffffff;
text-shadow: 1px 1px 0.5px #0000ff;
background: #4b4b4b;
background: -webkit-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b),color-stop(25%, #1e1e1e),color-stop(44%, #000000),to(#000000));
background: -o-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
background: linear-gradient(to bottom, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#000000',GradientType=0 );
margin-left: 2px;
display: inline-block;
background-color: black;
padding: 2px 2px 2px 2px;
border: 1px solid white;
border-radius: 5px;
}
div#video_player_box {
background-repeat: no-repeat;
background-size: 100% 85%;
max-width: 787px;
max-height: 787px;
border-top: 5px solid #646464;
border-right: 5px solid #000000;
border-left: 5px solid #646464;
border-bottom: 5px solid #000000;
margin: 0px auto;
background: #000000;
}
div#video_controls_bar {
background: #9d9d9d;
background: -webkit-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#9d9d9d),color-stop(10%, #8d8d8d),color-stop(43%, #4f4f4f),color-stop(51%, #474747),color-stop(51%, #1e1e1e),to(#000000));
background: -o-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
background: linear-gradient(to bottom, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#000000',GradientType=0 );
border-top: 5px solid #000;
border-right: 5px solid #646464;
border-left: 5px solid #000;
border-bottom: 5px solid #646464;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
color: #fff;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
button#playpausebtn.playpausebtn {
right: 4px;
border-radius: 100%;
background-size: 100% 100%;
border: none;
outline: none;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png) no-repeat;
float: left;
width: 44px;
height: 44px;
cursor: pointer;
opacity: 1;
}
button#playpausebtn:hover {
width: 44px;
height: 44px;
background-size: 100% 100%;
border: none;
outline: none;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonhover.png) no-repeat;
}
button#playpausebtn:active {
width: 44px;
height: 44px;
background-size: 100% 100%;
border: none;
outline: none;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonclick.png) no-repeat;
}
button#fullscreenbtn {
border-radius: 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreen.png) no-repeat;
border-style: solid;
background-size: 100% 100%;
border-top: 2px solid #000;
border-right: 2px solid #646464;
border-left: 2px solid #000;
border-bottom: 2px solid #646464;
width: 25px;
float: right;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#fullscreenbtn:hover {
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenhover.png) no-repeat;
border-style: solid;
background-size: 100% 100%;
border-top: 2px solid #000;
border-right: 2px solid #646464;
border-left: 2px solid #000;
border-bottom: 2px solid #646464;
width: 25px;
float: right;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#fullscreenbtn:active {
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenclick.png) no-repeat;
border-style: solid;
background-size: 100% 100%;
border-top: 2px solid #000;
border-right: 2px solid #646464;
border-left: 2px solid #000;
border-bottom: 2px solid #646464;
width: 25px;
float: right;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#mutebtn.mutebtn {
position: fixed;
background-size: 100% 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
border-radius: 100%;
}
button#mutebtn:hover {
background-size: 100% 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
button#mutebtn:active {
background-size: 100% 100%;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
width: 25px;
height: 25px;
cursor: pointer;
opacity: 1;
border: none;
outline: none;
}
input#seekslider {
margin-bottom: 13px;
float: right;
-webkit-box-shadow: inset 0 0 1px 0.1px white;
box-shadow: inset 0 0 1px 0.1px white;
outline: none;
max-height: 5px;
height: 100%;
width: 100%;
max-width: 707px;
float: top;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
background-size: 100% 100%;
}
input#volumeslider {
margin-left: 30px;
-webkit-box-shadow: inset 0 0 1px 0.1px white;
box-shadow: inset 0 0 1px 0.1px white;
outline: none;
max-width: 128px;
width: 100%;
height: 100%;
max-height: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
background-size: 100% 100%;
}
input[type='range'] {
-webkit-appearance: none !important;
border-width: 1px;
border-style: solid;
border-color: #000;
}
input[type='range']::-webkit-slider-thumb {
border-radius: 100%;
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timeslider.png) no-repeat;
background-size: 100% 100%;
height: 15px;
width: 15px;
cursor: pointer;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
input[type='range']::-webkit-slider-thumb:hover {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderhover.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
input[type='range']::-webkit-slider-thumb:active {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderclick.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
input[type='range'].vol {
-webkit-appearance: none !important;
border-width: 1px;
border-style: solid;
border-color: hsl(0, 0%, 0%);
}
input[type='range'].vol::-webkit-slider-thumb {
border-radius: 100%;
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/vol.png) no-repeat;
background-size: 100% 100%;
height: 15px;
width: 15px;
cursor: pointer;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
input[type='range'].vol::-webkit-slider-thumb:hover {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
input[type='range'].vol::-webkit-slider-thumb:active {
-webkit-appearance: none !important;
background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
background-size: 100% 100%;
height: 18px;
width: 18px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="video_player_box">
<video id="my_video" width="100%" height="56.2225%" controlslist="nodownload">
<source src="https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/test.mp4" >
</video>
</head>
<body>
<div id="video_controls_bar">
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<button id="playpausebtn" class="playpausebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png);"></button>
<div class="time">
<span id="curtimetext">SSEmery</span> / <span id="durtimetext">Player</span>
</div>
<button id="mutebtn" class="mutebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;"></button>
<input id="volumeslider" class="vol" type="range" min="0" max="100" value="100" step="1">
<button id="fullscreenbtn"></button>
</div>
</div>
</body>
</html>

Currently, there are not any standardized specifications that targeting on the styling of different components inside of a slider (input of range type). To implement this effect, you can use one of the following two approaches:
Use non-standard and experimental vendor-specific pseudo-element
Even though there are no standard way to achieve this, all major browser
vendors are using some pseudo-element to provide control of style of slider.
Chrome / Safari / Opera:
There is no direct means to control the style of input of range type
in WebKit. A similar approach is use <progress /> element as slider.
::-webkit-progress-value controls the style of track before the thumb
(MDN ::-webkit-progress-value);
Firefox:
::-moz-range-progress controls the style of track before the thumb
(MDN ::-moz-range-progress);
Edge / IE:
::-ms-fill-lower and ::-ms-fill-upper controls the left and right
side (or lower and upper for vertical slider) of the track of the thumb
respectively. (MDN ::-ms-fill-lower and MDN ::-ms-fill-upper).
You can check each page respectively to apply style rules to specific
portion of the track of a slider.
This approach requires you to maintain lots of style across different
browsers. And your style may break in the future when browser changed
their interpretation of these CSS rules. But this can be achieve in pure
CSS.
Use a set of DOM nodes to compose a slider
Since a slider is purely a control to indicate current progress and provide
interface for user to change the progress, you can use a set of DOM nodes to
achieve this and register related event listener to handle the interaction
with user.

How to put animation on thumb of input type range ::on hover?

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>

Linking 'muted speaker' icon to volume slider when value = 0?

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");
}
}

Input[type=range] CSS not working on android device

This is the desired slider css which works on dekstop.
But only on mobile device (android) it shows like this. I wonder where the textfield like input shows like attached to the slider.
Here's the fiddle http://jsfiddle.net/p5zo31q8/
CSS
/* INPUT RANGE*/
/*chrome*/
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 1px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #fff;
height: 36px;
width: 36px;
border-radius: 50%;
background: #4BDAFF;
margin-top: -14px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
/*firefox*/
input[type=range]{
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 200px;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
/*internet*/
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
/*scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
margin-top:30px;
margin-bottom:30px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
background-color:#00B0F0;
}
input[type='range']{
background: #0c0;
height:10px;
}
input[type='range']::-webkit-slider-thumb{
background:#f60;
height:30px;
width:30px;
border-radius: 30px;
}

Develop Reference

JavaScript is the programming language of the Web.