@acdh-oeaw/universalviewer/dist/cjs/content-handlers/iiif/modules/uv-shared-module/css/range.less

The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎

.uv {
	@track-color: @gray-light;
	@thumb-color: @gray;
	@thumb-border: @text-color;
    @focus-border: 2px solid @link-color;
    @focus-track-color: lighten(@track-color, 10%);

    input[type="range"] {
		-webkit-appearance: none;
		appearance: none;
		background-color: transparent;
		cursor: pointer;
	}

	/* WebKit */
	input[type="range"]::-webkit-slider-runnable-track {
		height: 0.25rem;
		background-color: @track-color;
		border: none;
		border-radius: 999px;
	}

	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: 1rem;
		width: 1rem;
		margin-top: -5px;
		background-color: @thumb-color;
		border: 2px solid @thumb-border;
		border-radius: 999px;
	}

	input[type="range"]:focus::-webkit-slider-thumb {
		margin-top: -7px;
	}

	input[type="range"]:focus::-webkit-slider-runnable-track {
		background-color: @focus-track-color;
		border: @focus-border;
	}

	/* Firefox */
	input[type="range"]::-moz-range-track {
		height: 0.25rem;
		background-color: @track-color;
		border: none;
		border-radius: 999px;
	}

	input[type="range"]::-moz-range-thumb {
		height: 1rem;
		width: 1rem;
		margin-top: -0.5rem;
		background-color: @thumb-color;
		border: 2px solid @thumb-border;
		border-radius: 999px;
	}

	input[type="range"]:focus::-moz-range-track {
		background-color: @focus-track-color;
		border: @focus-border;
	}

    /* IE */

    input[type=range]::-ms-track {
        width: 300px;
        height: 5px;

        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;

        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;

        /*remove default tick marks*/
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: @gray-light;
    }

    input[type=range]::-ms-fill-upper {
        background: @gray-light;
    }

    input[type=range]::-ms-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: @gray;
    }

    input[type=range]:focus::-ms-fill-lower {
        background:  @gray-light;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: @gray-lighter;
    }
}