input[type=range].slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 1rem 0;
    background: 0 0;
    touch-action: none
}

    input[type=range].slider.is-fullwidth {
        display: block;
        width: 100%
    }

    input[type=range].slider:focus {
        outline: 0
    }

    input[type=range].slider:not([orient=vertical])::-webkit-slider-runnable-track {
        width: 100%
    }

    input[type=range].slider:not([orient=vertical])::-moz-range-track {
        width: 100%
    }

    input[type=range].slider:not([orient=vertical])::-ms-track {
        width: 100%
    }

    input[type=range].slider:not([orient=vertical]).has-output + output, input[type=range].slider:not([orient=vertical]).has-output-tooltip + output {
        width: 3rem;
        background: #4a4a4a;
        border-radius: 4px;
        padding: .4rem .8rem;
        font-size: .75rem;
        line-height: .75rem;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
        overflow: hidden;
        pointer-events: none;
        z-index: 200
    }

    input[type=range].slider:not([orient=vertical]).has-output-tooltip:disabled + output, input[type=range].slider:not([orient=vertical]).has-output:disabled + output {
        opacity: .5
    }

    input[type=range].slider:not([orient=vertical]).has-output {
        display: inline-block;
        vertical-align: middle;
        width: calc(100% - (4.2rem))
    }

        input[type=range].slider:not([orient=vertical]).has-output + output {
            display: inline-block;
            margin-left: .75rem;
            vertical-align: middle
        }

    input[type=range].slider:not([orient=vertical]).has-output-tooltip {
        display: block
    }

        input[type=range].slider:not([orient=vertical]).has-output-tooltip + output {
            position: absolute;
            left: 0;
            top: -.1rem
        }

    input[type=range].slider[orient=vertical] {
        writing-mode: vertical-lr;
    }

        input[type=range].slider[orient=vertical]::-webkit-slider-runnable-track {
            height: 100%
        }

        input[type=range].slider[orient=vertical]::-moz-range-track {
            height: 100%
        }

        input[type=range].slider[orient=vertical]::-ms-track {
            height: 100%
        }

    input[type=range].slider::-webkit-slider-runnable-track {
        cursor: pointer;
        animate: .2s;
        box-shadow: 0 0 0 #7a7a7a;
        background: #dbdbdb;
        border-radius: 4px;
        border: 0 solid #7a7a7a
    }

    input[type=range].slider::-moz-range-track {
        cursor: pointer;
        animate: .2s;
        box-shadow: 0 0 0 #7a7a7a;
        background: #dbdbdb;
        border-radius: 4px;
        border: 0 solid #7a7a7a
    }

    input[type=range].slider::-ms-track {
        cursor: pointer;
        animate: .2s;
        box-shadow: 0 0 0 #7a7a7a;
        background: #dbdbdb;
        border-radius: 4px;
        border: 0 solid #7a7a7a
    }

    input[type=range].slider::-ms-fill-lower {
        background: #dbdbdb;
        border-radius: 4px
    }

    input[type=range].slider::-ms-fill-upper {
        background: #dbdbdb;
        border-radius: 4px
    }

    input[type=range].slider::-webkit-slider-thumb {
        box-shadow: none;
        border: 1px solid #b5b5b5;
        border-radius: 4px;
        background: #fff;
        cursor: pointer
    }

    input[type=range].slider::-moz-range-thumb {
        box-shadow: none;
        border: 1px solid #b5b5b5;
        border-radius: 4px;
        background: #fff;
        cursor: pointer
    }

    input[type=range].slider::-ms-thumb {
        box-shadow: none;
        border: 1px solid #b5b5b5;
        border-radius: 4px;
        background: #fff;
        cursor: pointer
    }

    input[type=range].slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none
    }

    input[type=range].slider.is-circle::-webkit-slider-thumb {
        border-radius: 9999px
    }

    input[type=range].slider.is-circle::-moz-range-thumb {
        border-radius: 9999px
    }

    input[type=range].slider.is-circle::-ms-thumb {
        border-radius: 9999px
    }

    input[type=range].slider:active::-webkit-slider-thumb {
        transform: scale(1.25)
    }

    input[type=range].slider:active::-moz-range-thumb {
        transform: scale(1.25)
    }

    input[type=range].slider:active::-ms-thumb {
        transform: scale(1.25)
    }

    input[type=range].slider:disabled {
        opacity: .5;
        cursor: not-allowed
    }

        input[type=range].slider:disabled::-webkit-slider-thumb {
            cursor: not-allowed;
            transform: scale(1)
        }

        input[type=range].slider:disabled::-moz-range-thumb {
            cursor: not-allowed;
            transform: scale(1)
        }

        input[type=range].slider:disabled::-ms-thumb {
            cursor: not-allowed;
            transform: scale(1)
        }

    input[type=range].slider:not([orient=vertical]) {
        min-height: calc((1rem + 2px) * 1.25)
    }

        input[type=range].slider:not([orient=vertical])::-webkit-slider-runnable-track {
            height: .5rem
        }

        input[type=range].slider:not([orient=vertical])::-moz-range-track {
            height: .5rem
        }

        input[type=range].slider:not([orient=vertical])::-ms-track {
            height: .5rem
        }

    input[type=range].slider[orient=vertical]::-webkit-slider-runnable-track {
        width: .5rem
    }

    input[type=range].slider[orient=vertical]::-moz-range-track {
        width: .5rem
    }

    input[type=range].slider[orient=vertical]::-ms-track {
        width: .5rem
    }

    input[type=range].slider::-webkit-slider-thumb {
        height: 1rem;
        width: 1rem
    }

    input[type=range].slider::-moz-range-thumb {
        height: 1rem;
        width: 1rem
    }

    input[type=range].slider::-ms-thumb {
        height: 1rem;
        width: 1rem
    }

    input[type=range].slider::-ms-thumb {
        margin-top: 0
    }

    input[type=range].slider::-webkit-slider-thumb {
        margin-top: -.25rem
    }

    input[type=range].slider[orient=vertical]::-webkit-slider-thumb {
        margin-top: auto;
        margin-left: -.25rem
    }

    input[type=range].slider.is-small:not([orient=vertical]) {
        min-height: calc((.75rem + 2px) * 1.25)
    }

        input[type=range].slider.is-small:not([orient=vertical])::-webkit-slider-runnable-track {
            height: .375rem
        }

        input[type=range].slider.is-small:not([orient=vertical])::-moz-range-track {
            height: .375rem
        }

        input[type=range].slider.is-small:not([orient=vertical])::-ms-track {
            height: .375rem
        }

    input[type=range].slider.is-small[orient=vertical]::-webkit-slider-runnable-track {
        width: .375rem
    }

    input[type=range].slider.is-small[orient=vertical]::-moz-range-track {
        width: .375rem
    }

    input[type=range].slider.is-small[orient=vertical]::-ms-track {
        width: .375rem
    }

    input[type=range].slider.is-small::-webkit-slider-thumb {
        height: .75rem;
        width: .75rem
    }

    input[type=range].slider.is-small::-moz-range-thumb {
        height: .75rem;
        width: .75rem
    }

    input[type=range].slider.is-small::-ms-thumb {
        height: .75rem;
        width: .75rem
    }

    input[type=range].slider.is-small::-ms-thumb {
        margin-top: 0
    }

    input[type=range].slider.is-small::-webkit-slider-thumb {
        margin-top: -.1875rem
    }

    input[type=range].slider.is-small[orient=vertical]::-webkit-slider-thumb {
        margin-top: auto;
        margin-left: -.1875rem
    }

    input[type=range].slider.is-medium:not([orient=vertical]) {
        min-height: calc((1.25rem + 2px) * 1.25)
    }

        input[type=range].slider.is-medium:not([orient=vertical])::-webkit-slider-runnable-track {
            height: .625rem
        }

        input[type=range].slider.is-medium:not([orient=vertical])::-moz-range-track {
            height: .625rem
        }

        input[type=range].slider.is-medium:not([orient=vertical])::-ms-track {
            height: .625rem
        }

    input[type=range].slider.is-medium[orient=vertical]::-webkit-slider-runnable-track {
        width: .625rem
    }

    input[type=range].slider.is-medium[orient=vertical]::-moz-range-track {
        width: .625rem
    }

    input[type=range].slider.is-medium[orient=vertical]::-ms-track {
        width: .625rem
    }

    input[type=range].slider.is-medium::-webkit-slider-thumb {
        height: 1.25rem;
        width: 1.25rem
    }

    input[type=range].slider.is-medium::-moz-range-thumb {
        height: 1.25rem;
        width: 1.25rem
    }

    input[type=range].slider.is-medium::-ms-thumb {
        height: 1.25rem;
        width: 1.25rem
    }

    input[type=range].slider.is-medium::-ms-thumb {
        margin-top: 0
    }

    input[type=range].slider.is-medium::-webkit-slider-thumb {
        margin-top: -.3125rem
    }

    input[type=range].slider.is-medium[orient=vertical]::-webkit-slider-thumb {
        margin-top: auto;
        margin-left: -.3125rem
    }

    input[type=range].slider.is-large:not([orient=vertical]) {
        min-height: calc((1.5rem + 2px) * 1.25)
    }

        input[type=range].slider.is-large:not([orient=vertical])::-webkit-slider-runnable-track {
            height: .75rem
        }

        input[type=range].slider.is-large:not([orient=vertical])::-moz-range-track {
            height: .75rem
        }

        input[type=range].slider.is-large:not([orient=vertical])::-ms-track {
            height: .75rem
        }

    input[type=range].slider.is-large[orient=vertical]::-webkit-slider-runnable-track {
        width: .75rem
    }

    input[type=range].slider.is-large[orient=vertical]::-moz-range-track {
        width: .75rem
    }

    input[type=range].slider.is-large[orient=vertical]::-ms-track {
        width: .75rem
    }

    input[type=range].slider.is-large::-webkit-slider-thumb {
        height: 1.5rem;
        width: 1.5rem
    }

    input[type=range].slider.is-large::-moz-range-thumb {
        height: 1.5rem;
        width: 1.5rem
    }

    input[type=range].slider.is-large::-ms-thumb {
        height: 1.5rem;
        width: 1.5rem
    }

    input[type=range].slider.is-large::-ms-thumb {
        margin-top: 0
    }

    input[type=range].slider.is-large::-webkit-slider-thumb {
        margin-top: -.375rem
    }

    input[type=range].slider.is-large[orient=vertical]::-webkit-slider-thumb {
        margin-top: auto;
        margin-left: -.375rem
    }

    input[type=range].slider.is-white::-moz-range-track {
        background: #fff !important
    }

    input[type=range].slider.is-white::-webkit-slider-runnable-track {
        background: #fff !important
    }

    input[type=range].slider.is-white::-ms-track {
        background: #fff !important
    }

    input[type=range].slider.is-white::-ms-fill-lower {
        background: #fff
    }

    input[type=range].slider.is-white::-ms-fill-upper {
        background: #fff
    }

    input[type=range].slider.is-white .has-output-tooltip + output, input[type=range].slider.is-white.has-output + output {
        background-color: #fff;
        color: #0a0a0a
    }

    input[type=range].slider.is-black::-moz-range-track {
        background: #0a0a0a !important
    }

    input[type=range].slider.is-black::-webkit-slider-runnable-track {
        background: #0a0a0a !important
    }

    input[type=range].slider.is-black::-ms-track {
        background: #0a0a0a !important
    }

    input[type=range].slider.is-black::-ms-fill-lower {
        background: #0a0a0a
    }

    input[type=range].slider.is-black::-ms-fill-upper {
        background: #0a0a0a
    }

    input[type=range].slider.is-black .has-output-tooltip + output, input[type=range].slider.is-black.has-output + output {
        background-color: #0a0a0a;
        color: #fff
    }

    input[type=range].slider.is-light::-moz-range-track {
        background: #f5f5f5 !important
    }

    input[type=range].slider.is-light::-webkit-slider-runnable-track {
        background: #f5f5f5 !important
    }

    input[type=range].slider.is-light::-ms-track {
        background: #f5f5f5 !important
    }

    input[type=range].slider.is-light::-ms-fill-lower {
        background: #f5f5f5
    }

    input[type=range].slider.is-light::-ms-fill-upper {
        background: #f5f5f5
    }

    input[type=range].slider.is-light .has-output-tooltip + output, input[type=range].slider.is-light.has-output + output {
        background-color: #f5f5f5;
        color: rgba(0,0,0,.7)
    }

    input[type=range].slider.is-dark::-moz-range-track {
        background: #363636 !important
    }

    input[type=range].slider.is-dark::-webkit-slider-runnable-track {
        background: #363636 !important
    }

    input[type=range].slider.is-dark::-ms-track {
        background: #363636 !important
    }

    input[type=range].slider.is-dark::-ms-fill-lower {
        background: #363636
    }

    input[type=range].slider.is-dark::-ms-fill-upper {
        background: #363636
    }

    input[type=range].slider.is-dark .has-output-tooltip + output, input[type=range].slider.is-dark.has-output + output {
        background-color: #363636;
        color: #fff
    }

    input[type=range].slider.is-primary::-moz-range-track {
        background: #00d1b2 !important
    }

    input[type=range].slider.is-primary::-webkit-slider-runnable-track {
        background: #00d1b2 !important
    }

    input[type=range].slider.is-primary::-ms-track {
        background: #00d1b2 !important
    }

    input[type=range].slider.is-primary::-ms-fill-lower {
        background: #00d1b2
    }

    input[type=range].slider.is-primary::-ms-fill-upper {
        background: #00d1b2
    }

    input[type=range].slider.is-primary .has-output-tooltip + output, input[type=range].slider.is-primary.has-output + output {
        background-color: #00d1b2;
        color: #fff
    }

    input[type=range].slider.is-link::-moz-range-track {
        background: #485fc7 !important
    }

    input[type=range].slider.is-link::-webkit-slider-runnable-track {
        background: #485fc7 !important
    }

    input[type=range].slider.is-link::-ms-track {
        background: #485fc7 !important
    }

    input[type=range].slider.is-link::-ms-fill-lower {
        background: #485fc7
    }

    input[type=range].slider.is-link::-ms-fill-upper {
        background: #485fc7
    }

    input[type=range].slider.is-link .has-output-tooltip + output, input[type=range].slider.is-link.has-output + output {
        background-color: #485fc7;
        color: #fff
    }

    input[type=range].slider.is-info::-moz-range-track {
        background: #3e8ed0 !important
    }

    input[type=range].slider.is-info::-webkit-slider-runnable-track {
        background: #3e8ed0 !important
    }

    input[type=range].slider.is-info::-ms-track {
        background: #3e8ed0 !important
    }

    input[type=range].slider.is-info::-ms-fill-lower {
        background: #3e8ed0
    }

    input[type=range].slider.is-info::-ms-fill-upper {
        background: #3e8ed0
    }

    input[type=range].slider.is-info .has-output-tooltip + output, input[type=range].slider.is-info.has-output + output {
        background-color: #3e8ed0;
        color: #fff
    }

    input[type=range].slider.is-success::-moz-range-track {
        background: #48c78e !important
    }

    input[type=range].slider.is-success::-webkit-slider-runnable-track {
        background: #48c78e !important
    }

    input[type=range].slider.is-success::-ms-track {
        background: #48c78e !important
    }

    input[type=range].slider.is-success::-ms-fill-lower {
        background: #48c78e
    }

    input[type=range].slider.is-success::-ms-fill-upper {
        background: #48c78e
    }

    input[type=range].slider.is-success .has-output-tooltip + output, input[type=range].slider.is-success.has-output + output {
        background-color: #48c78e;
        color: #fff
    }

    input[type=range].slider.is-warning::-moz-range-track {
        background: #ffe08a !important
    }

    input[type=range].slider.is-warning::-webkit-slider-runnable-track {
        background: #ffe08a !important
    }

    input[type=range].slider.is-warning::-ms-track {
        background: #ffe08a !important
    }

    input[type=range].slider.is-warning::-ms-fill-lower {
        background: #ffe08a
    }

    input[type=range].slider.is-warning::-ms-fill-upper {
        background: #ffe08a
    }

    input[type=range].slider.is-warning .has-output-tooltip + output, input[type=range].slider.is-warning.has-output + output {
        background-color: #ffe08a;
        color: rgba(0,0,0,.7)
    }

    input[type=range].slider.is-danger::-moz-range-track {
        background: #f14668 !important
    }

    input[type=range].slider.is-danger::-webkit-slider-runnable-track {
        background: #f14668 !important
    }

    input[type=range].slider.is-danger::-ms-track {
        background: #f14668 !important
    }

    input[type=range].slider.is-danger::-ms-fill-lower {
        background: #f14668
    }

    input[type=range].slider.is-danger::-ms-fill-upper {
        background: #f14668
    }

    input[type=range].slider.is-danger .has-output-tooltip + output, input[type=range].slider.is-danger.has-output + output {
        background-color: #f14668;
        color: #fff
    }