Skip to content

Instantly share code, notes, and snippets.

@sdhagen

sdhagen/index.html

Created June 11, 2023 02:35
Show Gist options
  • Save sdhagen/e2b97d4dda89786e3a569296832c333b to your computer and use it in GitHub Desktop.
Save sdhagen/e2b97d4dda89786e3a569296832c333b to your computer and use it in GitHub Desktop.
Download ZIP
[SDH Base Elements] Progress Bars (All) 02
Raw
index.html
<html>
<div class="demo-preview">
<p> div class="progress vertical"</p>
<div class="progress vertical dark">
<div role="progressbar" data-progress="90" class="progress-bar"></div>
</div>
<div class="progress vertical">
<div role="progressbar" style="height: 70%;" class="progress-bar progress-bar-secondary"></div>
</div>
<div class="progress vertical">
<div role="progressbar" style="height: 60%;" class="progress-bar progress-bar-default"></div>
</div>
<div class="progress vertical">
<div role="progressbar" style="height: 50%;" class="progress-bar progress-bar-success">
</div>
</div>
<div class="progress vertical">
<div role="progressbar" style="height: 40%;" class="progress-bar progress-bar-info"></div>
</div>
<div class="progress vertical">
<div role="progressbar" style="height: 30%;" class="progress-bar progress-bar-warning">
</div>
</div>
<div class="progress vertical">
<div role="progressbar" style="height: 20%;" class="progress-bar progress-bar-danger">
</div>
</div>
</div>
<div class="demo-preview">
<p>div class="progress vertical progress-striped"</p>
<div class="progress vertical progress-striped">
<div role="progressbar" style="height: 95%;" class="progress-bar"><span class="sr-only">Primary</span></div>
</div>
<div class="progress vertical progress-striped">
<div role="progressbar" style="height: 90%;" class="progress-bar progress-bar-secondary"><span class="sr-only">Secondary</span></div>
</div>
<div class="progress vertical progress-striped">
<div role="progressbar" style="height: 85%;" class="progress-bar progress-bar-default"><span class="sr-only">Default</span></div>
</div>
<div class="progress vertical progress-striped">
<div role="progressbar" style="height: 80%;" class="progress-bar progress-bar-success"><span class="sr-only">Success</span>
</div>
</div>
<div class="progress vertical progress-striped">
<div role="progressbar" style="height: 60%;" class="progress-bar progress-bar-info"><span class="sr-only">Info</span></div>
</div>
<div class="progress vertical progress-striped">
<div role="progressbar" style="height: 40%;" class="progress-bar progress-bar-warning"><span class="sr-only">Warning</span>
</div>
</div>
<div class="progress vertical progress-striped">
<div role="progressbar" style="height: 20%;" class="progress-bar progress-bar-danger"><span class="sr-only">Danger</span>
</div>
</div>
</div>
</div>
</div>
<div class="demo-preview">
<p>div class="progress vertical progress-striped active"</p>
<div class="progress vertical progress-striped active">
<div role="progressbar" style="height: 95%;" class="progress-bar"><span class="sr-only">Primary</span></div>
</div>
<div class="progress vertical progress-striped active">
<div role="progressbar" style="height: 90%;" class="progress-bar progress-bar-secondary"><span class="sr-only">Secondary</span></div>
</div>
<div class="progress vertical progress-striped active">
<div role="progressbar" style="height: 85%;" class="progress-bar progress-bar-default"><span class="sr-only">Default</span></div>
</div>
<div class="progress vertical progress-striped active">
<div role="progressbar" style="height: 80%;" class="progress-bar progress-bar-success"><span class="sr-only">Success</span>
</div>
</div>
<div class="progress vertical progress-striped active">
<div role="progressbar" style="height: 60%;" class="progress-bar progress-bar-info"><span class="sr-only">Info</span></div>
</div>
<div class="progress vertical progress-striped active">
<div role="progressbar" style="height: 40%;" class="progress-bar progress-bar-warning"><span class="sr-only">Warning</span>
</div>
</div>
<div class="progress vertical progress-striped active">
<div role="progressbar" style="height: 20%;" class="progress-bar progress-bar-danger"><span class="sr-only">Danger</span>
</div>
</div>
</div>
<div class="demo-preview">
<p>div class="progress"</p>
<div class="progress">
<div role="progressbar" style="width: 95%;" class="progress-bar progress-bar-primary"><span>Primary</span></div>
</div>
<div class="progress">
<div role="progressbar " style="width: 90%;" class="progress-bar progress-bar-secondary"><span>Secondary</span></div>
</div>
<div class="progress">
<div role="progressbar " style="width: 80%;" class="progress-bar progress-bar-default"><span>Default</span></div>
</div>
<div class="progress">
<div role="progressbar " style="width: 70%;" class="progress-bar progress-bar-success"><span>Success</span></div>
</div>
<div class="progress">
<div role="progressbar " style="width: 60%;" class="progress-bar progress-bar-info"><span>Info</span></div>
</div>
<div class="progress">
<div role="progressbar " style="width: 50%;" class="progress-bar progress-bar-warning"><span>Warning</span></div>
</div>
<div class="progress">
<div role="progressbar" style="width: 40%;" class="progress-bar progress-bar-danger"><span>Danger</span></div>
</div>
</div>
<div class="demo-preview">
<p>div class="progress progress-striped"</p>
<div class="progress progress-striped">
<div role="progressbar" style="width: 95%;" class="progress-bar progress-bar-primary"><span>Primary</span></div>
</div>
<div class="progress progress-striped">
<div role="progressbar " style="width: 90%;" class="progress-bar progress-bar-secondary"><span>Secondary</span></div>
</div>
<div class="progress progress-striped">
<div role="progressbar " style="width: 80%;" class="progress-bar progress-bar-default"><span>Default</span></div>
</div>
<div class="progress progress-striped">
<div role="progressbar " style="width: 70%;" class="progress-bar progress-bar-success"><span>Success</span></div>
</div>
<div class="progress progress-striped">
<div role="progressbar " style="width: 60%;" class="progress-bar progress-bar-info"><span>Info</span></div>
</div>
<div class="progress progress-striped">
<div role="progressbar " style="width: 50%;" class="progress-bar progress-bar-warning"><span>Warning</span></div>
</div>
<div class="progress progress-striped">
<div role="progressbar" style="width: 25%;" class="progress-bar progress-bar-danger"><span>Danger</span></div>
</div>
</div>
<div class="demo-preview">
<p>div class="progress progress-striped active"</p>
<div class="progress progress-striped active">
<div role="progressbar" style="width: 95%;" class="progress-bar progress-bar-primary"><span>Primary</span></div>
</div>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 90%;" class="progress-bar progress-bar-secondary"><span>Secondary</span></div>
</div>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 80%;" class="progress-bar progress-bar-default"><span>Default</span></div>
</div>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 70%;" class="progress-bar progress-bar-success"><span>Success</span></div>
</div>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 60%;" class="progress-bar progress-bar-info"><span>Info</span></div>
</div>
<div class="progress progress-striped active">
<div role="progressbar " style="width: 50%;" class="progress-bar progress-bar-warning"><span>Warning</span></div>
</div>
<div class="progress progress-striped active">
<div role="progressbar" style="width: 25%;" class="progress-bar progress-bar-danger"><span>Danger</span></div>
</div>
</div>
<div class="demo-preview">
<p>div class="progress [progress-striped active] textured"</p>
<div class="progress textured">
<div role="progressbar" style="width: 95%;" class="progress-bar progress-bar-primary"><span>Primary</span></div>
</div>
<div class="progress progress-striped textured">
<div role="progressbar " style="width: 90%;" class="progress-bar progress-bar-secondary"><span>Secondary</span></div>
</div>
<div class="progress progress-striped active textured">
<div role="progressbar " style="width: 80%;" class="progress-bar progress-bar-danger"><span>Default</span></div>
</div>
</div>
<div class="demo-preview">
<p> div class="progress vertical"</p>
<div class="progress progress-striped active">
<div id="percentageBar" role="progressbar" class="progress-bar progress-bar-secondary"></div>
</div>
<span id="pctVal" class="progressAmount" style="color: whitesmoke;">0%</span>
&nbsp;&nbsp;&nbsp;
<span id="8bitVal" class="progressAmount" style="color: whitesmoke;">0/1024</span>
<form class="rangeslider" style="width:75%">
<input type="range" id="range" min="0" max="1024" value="0" />
</form>
</div>
</html>
Raw
script.js
var bars = document.querySelectorAll(".progress > .progress-bar");
console.clear();
setInterval(function () {
bars.forEach(function (bar) {
var getWidth = parseFloat(bar.dataset.progress);
for (var i = 0; i < getWidth; i++) {
bar.style.width = i + "%";
}
var getHeight = parseFloat(bar.dataset.progress);
for (var i = 0; i < getHeight; i++) {
bar.style.height = i + "%";
}
});
}, 500);
/*
var bars = document.querySelectorAll('.meter > span');
console.clear();
setInterval(function(){
bars.forEach(function(bar){
var getWidth = parseFloat(bar.dataset.progress);
for(var i = 0; i < getWidth; i++) {
bar.style.width = i + '%';
}
});
}, 500);
*/
document.getElementById("range").onchange = function () {
var i = document.getElementById("range").value;
document.getElementById("8bitVal").innerHTML = i + "/1024";
i = Math.round(i / 10.24);
document.getElementById("pctVal").innerHTML = i + "%";
document.getElementById("percentageBar").style.width = i + "%";
if (i <= 20) {
document.getElementById("percentageBar").classList.add("progress-bar-red");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-orange");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-ltyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-dkyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-green");
}
if (i > 20 && i < 39) {
document
.getElementById("percentageBar")
.classList.remove("progress-bar-red");
document
.getElementById("percentageBar")
.classList.add("progress-bar-orange");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-ltyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-dkyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-green");
}
if (i > 39 && i < 59) {
document
.getElementById("percentageBar")
.classList.remove("progress-bar-red");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-orange");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-ltyellow");
document
.getElementById("percentageBar")
.classList.add("progress-bar-dkyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-green");
}
if (i > 59 && i < 79) {
document
.getElementById("percentageBar")
.classList.remove("progress-bar-red");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-orange");
document
.getElementById("percentageBar")
.classList.add("progress-bar-ltyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-dkyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-green");
}
if (i > 79 && i <= 100) {
document
.getElementById("percentageBar")
.classList.remove("progress-bar-red");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-orange");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-ltyellow");
document
.getElementById("percentageBar")
.classList.remove("progress-bar-dkyellow");
document
.getElementById("percentageBar")
.classList.add("progress-bar-green");
}
};
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
sdh-base-elements-progress-bars-all-02.markdown
Raw
style.scss
body {
background-color: #232323;
}
.demo-preview {
background-color: transparent;
padding-top: 10px;
padding-bottom: 10px;
margin: auto;
margin-top: 0px;
width: 90%;
height: 40em;
text-align: center;
color: #fff;
}
$bg-light: #f0f0f0;
$bg-dark: #313233;
$progress-default: #b0bec5;
$progress-primary: #007bff;
$progress-secondary: #323a45;
$progress-success: #64dd17;
$progress-warning: #ffd600;
$progress-info: #29b6f6;
$progress-danger: #ef1c1c;
$progress-red: #ef1c1c;
$progress-orange: #f27011;
$progress-dkyellow: #f2b01e;
$progress-ltyellow: #f2d31b;
$progress-green: #86e01e;
.progress {
background-color: $bg-light;
padding: 3px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25),
0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25),
0 1px rgba(255, 255, 255, 0.08);
height: 40px;
&.progress-xs {
height: 5px;
margin-top: 5px;
}
&.progress-sm {
height: 10px;
margin-top: 5px;
}
&.progress-lg {
height: 25px;
}
&.vertical {
position: relative;
width: 40px;
height: 100%;
display: inline-block;
margin-right: 10px;
> .progress-bar {
width: 75% !important;
position: absolute;
bottom: 5px;
}
&.progress-xs {
width: 5px;
margin-top: 5px;
}
&.progress-sm {
width: 10px;
margin-top: 5px;
}
&.progress-lg {
width: 30px;
}
}
}
.progress-bar {
background-color: $progress-primary;
box-shadow: none;
position: relative;
margin: 2px;
height: 30px;
border-radius: 4px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25),
inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25),
inset 0 1px rgba(255, 255, 255, 0.1);
&.text-left {
text-align: left;
span {
margin-left: 10px;
}
}
&.text-right {
text-align: right;
span {
margin-right: 10px;
}
}
}
@mixin gradient-striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
background-image: -webkit-linear-gradient(
$angle,
$color 25%,
transparent 25%,
transparent 50%,
$color 50%,
$color 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
$angle,
$color 25%,
transparent 25%,
transparent 50%,
$color 50%,
$color 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
$angle,
$color 25%,
transparent 25%,
transparent 50%,
$color 50%,
$color 75%,
transparent 75%,
transparent
);
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@mixin animation($animation) {
-webkit-animation: $animation;
-o-animation: $animation;
animation: $animation;
}
.progress.active .progress-bar,
.progress-bar.active {
@include animation(progress-bar-stripes 2s linear infinite);
}
.progress-striped .progress-bar,
.progress-bar-striped {
@include gradient-striped;
background-size: 40px 40px;
}
@mixin progress-bar-variant($color) {
background-color: $color;
}
.progress-bar-secondary {
@include progress-bar-variant($progress-secondary);
}
.progress-bar-default {
@include progress-bar-variant($progress-default);
}
.progress-bar-success {
@include progress-bar-variant($progress-success);
}
.progress-bar-info {
@include progress-bar-variant($progress-info);
}
.progress-bar-warning {
@include progress-bar-variant($progress-warning);
}
.progress-bar-danger {
@include progress-bar-variant($progress-danger);
}
.progress-bar-red {
@include progress-bar-variant($progress-red);
}
.progress-bar-orange {
@include progress-bar-variant($progress-orange);
}
.progress-bar-ltyellow {
@include progress-bar-variant($progress-ltyellow);
}
.progress-bar-dkyellow {
@include progress-bar-variant($progress-dkyellow);
}
.progress-bar-green {
@include progress-bar-variant($progress-green);
}
.textured .progress-bar:before,
.glass .progress-bar:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
}
.textured .progress-bar:before {
bottom: 0;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVR42mXMsQkAAAzDMH+S/69M6VAoeAgGDQFIW/4QQARbwaF+B3+SPGAo8blgAAAAAElFTkSuQmCC")
0 0 repeat;
border-radius: 4px 4px 0 0;
}
.textured .progress-bar:after {
z-index: 2;
bottom: 45%;
border-radius: 4px;
background-image: -webkit-linear-gradient(
top,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.05)
);
background-image: -moz-linear-gradient(
top,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.05)
);
background-image: -o-linear-gradient(
top,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.05)
);
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.05)
);
}
/*=======================================
DARK RANGE SLIDER
-----------------------------------------
<form class="rangeslider">
<input type=range id=PWMslider min=0 max=100 value=50>
</form>
========================================*/
.rangeslider {
margin: 0 auto;
padding: 20px 0;
width: 500px;
}
input[type="range"] {
background: rgb(30, 30, 30);
background: -moz-linear-gradient(
top,
rgba(30, 30, 30, 1) 0%,
rgba(47, 47, 47, 1) 100%
);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgba(30, 30, 30, 1)),
color-stop(100%, rgba(47, 47, 47, 1))
);
background: -webkit-linear-gradient(
top,
rgba(30, 30, 30, 1) 0%,
rgba(47, 47, 47, 1) 100%
);
background: -o-linear-gradient(
top,
rgba(30, 30, 30, 1) 0%,
rgba(47, 47, 47, 1) 100%
);
background: -ms-linear-gradient(
top,
rgba(30, 30, 30, 1) 0%,
rgba(47, 47, 47, 1) 100%
);
background: linear-gradient(
to bottom,
rgba(30, 30, 30, 1) 0%,
rgba(47, 47, 47, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#2f2f2f',GradientType=0 );
border-bottom: 1px solid #4b4b4b;
border-top: 1px solid #060606;
height: 10px;
width: 100%;
-moz-appearance: none;
-webkit-appearance: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.rangeslider input::-webkit-slider-thumb {
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
rgb(80, 80, 80);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-moz-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(84, 84, 84, 1) 5%, rgba(
82,
82,
82,
1
)
16%, rgba(61, 61, 61, 1) 95%, rgba(58, 58, 58, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(80, 80, 80, 1)), color-stop(5%, rgba(84, 84, 84, 1)), color-stop(16%, rgba(82, 82, 82, 1)), color-stop(95%, rgba(61, 61, 61, 1)), color-stop(100%, rgba(58, 58, 58, 1)));
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-webkit-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(84, 84, 84, 1) 5%, rgba(
82,
82,
82,
1
)
16%, rgba(61, 61, 61, 1) 95%, rgba(58, 58, 58, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-o-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(84, 84, 84, 1) 5%, rgba(
82,
82,
82,
1
)
16%, rgba(61, 61, 61, 1) 95%, rgba(58, 58, 58, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-ms-linear-gradient(top, rgba(80, 80, 80, 1) 0%, rgba(84, 84, 84, 1) 5%, rgba(
82,
82,
82,
1
)
16%, rgba(61, 61, 61, 1) 95%, rgba(58, 58, 58, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
linear-gradient(
to bottom,
rgba(80, 80, 80, 1) 0%,
rgba(84, 84, 84, 1) 5%,
rgba(82, 82, 82, 1) 16%,
rgba(61, 61, 61, 1) 95%,
rgba(58, 58, 58, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#3a3a3a',GradientType=0 );
border: 1px solid #1a1a1a;
cursor: pointer;
height: 22px;
text-indent: -9999px;
width: 90px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.2) inset;
-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.2) inset;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.2) inset;
-moz-appearance: none;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.rangeslider input::-webkit-slider-thumb:hover {
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
rgb(83, 83, 83);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-moz-linear-gradient(top, rgba(83, 83, 83, 1) 0%, rgba(88, 88, 88, 1) 5%, rgba(
86,
86,
86,
1
)
16%, rgba(66, 66, 66, 1) 95%, rgba(62, 62, 62, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(83, 83, 83, 1)), color-stop(5%, rgba(88, 88, 88, 1)), color-stop(16%, rgba(86, 86, 86, 1)), color-stop(95%, rgba(66, 66, 66, 1)), color-stop(100%, rgba(62, 62, 62, 1)));
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-webkit-linear-gradient(top, rgba(83, 83, 83, 1) 0%, rgba(88, 88, 88, 1) 5%, rgba(
86,
86,
86,
1
)
16%, rgba(66, 66, 66, 1) 95%, rgba(62, 62, 62, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-o-linear-gradient(top, rgba(83, 83, 83, 1) 0%, rgba(88, 88, 88, 1) 5%, rgba(
86,
86,
86,
1
)
16%, rgba(66, 66, 66, 1) 95%, rgba(62, 62, 62, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-ms-linear-gradient(top, rgba(83, 83, 83, 1) 0%, rgba(88, 88, 88, 1) 5%, rgba(
86,
86,
86,
1
)
16%, rgba(66, 66, 66, 1) 95%, rgba(62, 62, 62, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
linear-gradient(
to bottom,
rgba(83, 83, 83, 1) 0%,
rgba(88, 88, 88, 1) 5%,
rgba(86, 86, 86, 1) 16%,
rgba(66, 66, 66, 1) 95%,
rgba(62, 62, 62, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#535353', endColorstr='#3e3e3e',GradientType=0 );
}
.rangeslider input::-webkit-slider-thumb:active {
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
rgb(62, 62, 62);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-moz-linear-gradient(top, rgba(62, 62, 62, 1) 0%, rgba(66, 66, 66, 1) 5%, rgba(
86,
86,
86,
1
)
84%, rgba(88, 88, 88, 1) 95%, rgba(83, 83, 83, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(62, 62, 62, 1)), color-stop(5%, rgba(66, 66, 66, 1)), color-stop(84%, rgba(86, 86, 86, 1)), color-stop(95%, rgba(88, 88, 88, 1)), color-stop(100%, rgba(83, 83, 83, 1)));
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-webkit-linear-gradient(top, rgba(62, 62, 62, 1) 0%, rgba(66, 66, 66, 1) 5%, rgba(
86,
86,
86,
1
)
84%, rgba(88, 88, 88, 1) 95%, rgba(83, 83, 83, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-o-linear-gradient(top, rgba(62, 62, 62, 1) 0%, rgba(66, 66, 66, 1) 5%, rgba(
86,
86,
86,
1
)
84%, rgba(88, 88, 88, 1) 95%, rgba(83, 83, 83, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
-ms-linear-gradient(top, rgba(62, 62, 62, 1) 0%, rgba(66, 66, 66, 1) 5%, rgba(
86,
86,
86,
1
)
84%, rgba(88, 88, 88, 1) 95%, rgba(83, 83, 83, 1) 100%);
background: url(http://cameronbaney.com/codepen/dark-ui/range-ribs.png)
no-repeat center 5px,
linear-gradient(
to bottom,
rgba(62, 62, 62, 1) 0%,
rgba(66, 66, 66, 1) 5%,
rgba(86, 86, 86, 1) 84%,
rgba(88, 88, 88, 1) 95%,
rgba(83, 83, 83, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3e3e', endColorstr='#535353',GradientType=0 );
}
/*==================== END 'DARK RANGE SLIDER' ====================*/
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment