You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.2 KiB
39 lines
1.2 KiB
5 years ago
|
#volume {
|
||
|
|
width: 40%; /* Width of the outside container */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* The slider itself */
|
||
|
|
.slider {
|
||
|
|
-webkit-appearance: none; /* Override default CSS styles */
|
||
|
|
appearance: none;
|
||
|
|
width: 40%; /* Full-width */
|
||
|
|
height: 20px; /* 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Mouse-over effects */
|
||
|
|
.slider:hover {
|
||
|
|
opacity: 1; /* Fully shown on mouse-over */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
||
|
|
.slider::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none; /* Override default look */
|
||
|
|
appearance: none;
|
||
|
|
width: 25px; /* Set a specific slider handle width */
|
||
|
|
height: 25px; /* Slider handle height */
|
||
|
|
background: #000;
|
||
|
|
cursor: pointer; /* Cursor on hover */
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider::-moz-range-thumb {
|
||
|
|
width: 25px; /* Set a specific slider handle width */
|
||
|
|
height: 25px; /* Slider handle height */
|
||
|
|
background: #000; /* Green background */
|
||
|
|
cursor: pointer; /* Cursor on hover */
|
||
|
|
}
|