.tslidercontainer {
    width: 100%;
}

.tslidercontainer .label {
    display: block;
    text-align: center;
    color: var(--bs-body-color);
}

.tslidercontainer input[type="range"].tfield_disabled {
    background: whitesmoke;
}


.tslidercontainer input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background: var(--bs-body-bg)
    border: 1px solid var(--bs-border-color) !important;
    outline: none;
    padding: 0;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.tslidercontainer input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
}

.tslidercontainer input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
}

.tslidercontainer input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}

.tslidercontainer input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}

.tslidercontainer input[type="range"].tfield_disabled::-webkit-slider-thumb {
    background: silver;
}

.tslidercontainer input[type="range"].tfield_disabled::-moz-range-thumb {
    background: silver;
}