.valued-slider {
    width: 100%;
}
.valued-slider .labels {
    clear: both;
}
.valued-slider .labels div {
    width: 10%;
    float: right;
    text-align: center;
}
.valued-slider .control {
    clear: both;
}
.valued-slider .control>div {
    background: red;
    border-left: 1px #303030 solid;
    border-top: 1px #303030 solid;
    border-bottom: 1px #303030 solid;
    width: 10%;
    box-shadow: none;
    height: 16px;
    cursor: pointer;
    float: right;
}

.valued-slider .control>div>div {
    background: #f5f5f5;
    width: 100%;
    height: 100%;
}

.valued-slider .control>div:last-child,
.valued-slider .control>div:last-child>div {
    border-radius: 8px 0 0 8px;
}

.valued-slider .control>div:first-child,
.valued-slider .control>div:first-child>div {
    border-radius: 0 8px 8px 0px;
    border-right: 1px #303030 solid;
}


.valued-slider .control div:hover>div,
.valued-slider .control div:hover ~ div>div,
.valued-slider .control div.active>div,
.valued-slider .control div.active ~ div>div{
    background: transparent;
}


.valued-slider .clear {
    clear: both;
}