Iris/src/scss/components/_slider.scss

.slider {
	position: relative;
	cursor: pointer;
	height: 20px;

	input[type="range"]{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		opacity: 0;
		z-index: 2;
		cursor: pointer;

		&::-webkit-slider-thumb {
			width: 1px;
			border: 0;
		}
		
		&::-moz-range-thumb {
			width: 1px;
			border: 0;
		}

		&::-ms-thumb {
			width: 1px;
			border: 0;
		}
	}

	.track {
		position: absolute;
		background: rgba(0,0,0,0.2);
		border-radius: 2px;
		height: 4px;
		top: 42%;
		right: 0;
		left: 0;
		margin-top: -3px;

		.progress {
			position: absolute;
			background: $turquoise;
			pointer-events: none;
			top: 0;
			left: 0;
			border-radius: 2px;
			height: 100%;
			max-width: 100%;
			border-radius: 4px;

			&:after {
				@include animate(0.1s);
				content: '';
				display: block;
				background: $turquoise;
				position: absolute;
				top: 0;
				right: -1px;
				width: 4px;
				height: 4px;
				border-radius: 50%;
			}
		}
	}

	&.disabled {
		.progress {
			background: $mid_grey;

			&:after {
				background: $mid_grey !important;
			}
		}
	}

	&:hover {
		.track {
			.progress {
				&:after {
					width: 12px;
					height: 12px;
					top: -4px;
					right: -6px;
					background: lighten($turquoise, 10%);
				}
			}
		}
	}
}