osh-js/source/ext/resources/css/noUISlider.css

OSH javascript Toolkit

@import "font-awesome-4.6.3/css/font-awesome.min.css";

.noUi-tooltip {
    border-radius: 10px;
    box-shadow: 2px 2px 5px 0px #777;
    background-color: #777;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
    border: none;
    color: #FFF;
    width: 100px;
    height: 23px;
    padding: 2px 2px 2px 2px;
}
.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
    top: 35px;
}

.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
    top: 35px;
}

.noUi-connect {
    background-color: rgba(5, 107, 166, 0.6);
}

.noUi-tooltip:after {
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

.noUi-tooltip:after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: none;
    border-bottom: 10px solid #777;
}

.noUi-pips-horizontal {
    height:0px !important;
}


.noUi-handle:active {
    background-color: rgba(5, 107, 166, 0.6);
    box-shadow:none;
    border:none;
}


.noUi-horizontal {
    width: calc(100% - 50px);
}

/** put range and control button side by side **/

.osh-rangeslider-slider{
    float:left;
}

.osh-rangeslider-control {
    float: left;
    width: 30px;
    margin-left: 20px;
}

.osh-rangeslider-control-select {
    float: left;
    width: 30px;
    margin-left: 20px;
}

.osh-rangeslider-control a{
    text-decoration: none;
}

.osh-rangeslider-control-select a{
    text-decoration: none;
}

.osh-rangeslider-control a:after {
    font-family: FontAwesome;
    content: "\f044";
    vertical-align: middle;
    font-size:30px;
}

.osh-rangeslider-control-select a:after{
    font-family: FontAwesome;
    content: "\f046";
    vertical-align: middle;
    font-size:30px;
}