style.sass

.outer
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    width: 100%

.buttons
    display: flex
    flex-direction: row
    align-content: center
    justify-content: center
    width: 80%

    button
        width: 20%
        min-width: 100px
        font-weight: bold

.slidecontainer
    width: 100% /* Width of the outside container */

/* The slider itself */
.slider
    -webkit-appearance: none /* Override default CSS styles */
    appearance: none
    width: 100% /* Full-width */
    height: 25px /* Specified height */
    background: #d3d3d3 /* Grey background */
    outline: none /* Remove outline */
    opacity: 0.7 /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s /* 0.2 seconds transition on hover */
    transition: opacity .2s

    /* Mouse-over effects */
    &:hover
        opacity: 1 /* Fully shown on mouse-over */

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    &::-webkit-slider-thumb
        -webkit-appearance: none /* Override default look */
        appearance: none
        width: 25px /* Set a specific slider handle width */
        height: 25px /* Slider handle height */
        background: #04AA6D /* Green background */
        cursor: pointer /* Cursor on hover */


    &::-moz-range-thumb
        width: 25px /* Set a specific slider handle width */
        height: 25px /* Slider handle height */
        background: #04AA6D /* Green background */
        cursor: pointer /* Cursor on hover */