.fsslider {
position: relative;
min-width: 80px;
height: 8px;
display: inline-block;
width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #000;
}
.fsslider {
text-align: center;
line-height: 8px;
font-size: 8px;
font-family: "Lucida Grande", "Trebuchet MS";
}
.fsslider > * {
position: absolute;
top: 50%;
cursor: pointer;
}
.fsslider > .fsfull-value, .fsslider > .fssel-value {
margin-top: -1px;
height: 2px;
left: 0;
right: 0;
}
.fsslider > .fsfull-value {
width: 100%;
background: #d8d8d8;/*complement of selected area*/
}
.fsslider > .fssel-left, .fsslider > .fssel-right, .fsslider > .fscaret {
background: #fff;/*buttons*/
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
height: 100%;
min-width: 15px;
top: 0;
padding-left: 5px;
padding-right: 5px;
}
.fsslider > .fssel-value {
/*background: #ff7c19;*/
background: #27c470;/*selected area*/
height: 4px;
margin-top: -2px;
right: 50%;
}
.fsslider.fsdisabled {
color: #c8c8c8;
}
.fsslider.fsdisabled > .fssel-value {
background: #c8c8c8;
}