Iris/src/scss/components/_slider.scss

.slider {
	position: relative;
	cursor: pointer;

	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;

		.progress {
			position: absolute;
			background: $turquoise;
			pointer-events: none;
			left: 0;
			border-radius: 2px;
		}
	}

	&.disabled {
		.progress {
			background: rgba(255,255,255,0.25);
		}
	}

	&.horizontal {
		height: 20px;

		.track {
			height: 4px;
			top: 42%;
			right: 0;
			left: 0;
			margin-top: -3px;

			.progress {
				top: 0;
				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%;
				}
			}
		}

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

	&.vertical {
		width: 20px;
		height: 100%;

		.track {
			width: 5px;
			top: 0;
			bottom: 0;
			left: 12px;

			.progress {
				bottom: 0;
				width: 100%;
				max-height: 100%;
			}
		}
	}
}