.sliders {
    padding: 1.5em
}
/* the slider bar */
.slider {
    position: relative;
    width: 100%;
    height: 1em;
    margin: 2.5em auto;
    background-color: lightgray;
    border-radius: 0.5em;
    box-sizing: border-box;

    font-size: 0.5em;

    -ms-touch-action: none;
    touch-action: none;
}

.sliderText {
    padding-top: 10px!important;
}

/* the slider handle */
.slider:before {
    content: "";
    display: block;
    position: relative;
    top: -0.5em;
    width: 2em;
    height: 2em;
    margin-left: -1em;
    border: solid 0.25em #fff;
    border-radius: 1em;
    background-color: inherit;
    box-sizing: border-box;
    border: green solid 3px;
}

.val {
    background-color: cadetblue!important;
}

/* display the value */
.slider:after {
    content: attr(val);
    position: absolute;
    top: -1.5em;
    width: 2em;
    line-height:1em;
    margin-left: -1em;
    text-align: center;
}