Skip to content

Instantly share code, notes, and snippets.

@lucasponce
Last active July 15, 2020 15:41
Show Gist options
  • Save lucasponce/724c6bc5f0e594e86e0f2315cc7054d6 to your computer and use it in GitHub Desktop.
Save lucasponce/724c6bc5f0e594e86e0f2315cc7054d6 to your computer and use it in GitHub Desktop.
.requests-total input[type='range']:hover {
opacity: 1;
}
.requests-total input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
cursor: pointer;
background: var(--total-color);
}
.requests-total input[type='range']::-moz-range-thumb {
width: 25px;
height: 25px;
cursor: pointer;
background: var(--total-color);
}
.device-mobile input[type='range'] {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.device-mobile input[type='range']:hover {
opacity: 1;
}
.device-mobile input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
cursor: pointer;
background: var(--device-mobile-color);
}
.device-mobile input[type='range']::-moz-range-thumb {
width: 25px;
height: 25px;
cursor: pointer;
background: var(--device-mobile-color);
}
.device-web input[type='range'] {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.device-web input[type='range']:hover {
opacity: 1;
}
.device-web input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
cursor: pointer;
background: var(--device-web-color);
}
.device-web input[type='range']::-moz-range-thumb {
width: 25px;
height: 25px;
cursor: pointer;
background: var(--device-web-color);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment