@mixin range-slider( $prefix: "" )
{
	$range-slider-clr-primary: #2DB7F5 !default;
	$range-slider-clr-secondary: #E9E9E9 !default;
	$range-slider-clr-disabled: #CCCCCC !default;
	$range-slider-clr-obscured: lighten($range-slider-clr-primary, 20%) !default;
	$range-slider-clr-text: #333333 !default;
	$range-slider-clr-dot-bg: white !default;
	$range-slider-clr-handle-bg: white !default;
	$range-slider-clr-tooltip-fg: white !default;
	$range-slider-clr-tooltip-bg: #6C6C6C !default;
	
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	height: 4px;
	border-width: 0;
	border-color: grey;
	border-style: solid;
	font-size: 12px;
	
	*
	{
		// Remove tap highlight color for mobile safari
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	> div.#{$prefix}rail
	{
		position: absolute;
		
		width: 100%;
		height: 4px;
		
		background-color: $range-slider-clr-secondary;
	}
	
	> div.#{$prefix}track
	{
		position: absolute;
		left: 0;
		
		height: 4px;
		
		background-color: $range-slider-clr-obscured;
	}
	
	> div.#{$prefix}handle
	{
		position: absolute;
		
		box-sizing: border-box;
		width: 14px;
		height: 14px;
		margin-left: -7px;
		margin-top: -5px;
		z-index: 10;
		
		cursor: pointer;
		cursor: -webkit-grab;
		cursor: grab;
		
		background-color: $range-slider-clr-handle-bg;
		
		border: solid 2px $range-slider-clr-obscured;
		border-radius: 50%;
		
		&:hover,
		&:focus
		{
			outline: none;
			box-shadow: 0 0 5px $range-slider-clr-primary;
		}
		
		&:active,
		&.#{$prefix}dragging
		{
			cursor: -webkit-grabbing;
			cursor: grabbing;
			
			border-color: $range-slider-clr-primary;
			box-shadow: 0 0 5px $range-slider-clr-primary;
		}
	}
	
	> div.#{$prefix}marks
	{
		position: absolute;
		top: 18px;
		left: 0;
		
		width: 100%;
		
		> span.#{$prefix}text
		{
			position: absolute;
			
			display: inline-block;
			
			text-align: center;
			vertical-align: middle;
			white-space: nowrap;
			
			cursor: default;
			
			color: lighten($range-slider-clr-text, 30%);
			
			&.#{$prefix}active
			{
				color: $range-slider-clr-text;
			}
		}
	}
	
	> div.#{$prefix}steps
	{
		position: absolute;
		
		width: 100%;
		height: 4px;
		
		> span.#{$prefix}dot
		{
			position: absolute;
			bottom: -2px;
			
			box-sizing: border-box;
			width: 8px;
			height: 8px;
			margin-left: -4px;
			
			cursor: pointer;
			
			background-color: $range-slider-clr-dot-bg;
			
			border: 2px solid $range-slider-clr-secondary;
			border-radius: 50%;
			
			&.#{$prefix}active
			{
				border-color: $range-slider-clr-obscured;
			}
		}
	}
	
	&.#{$prefix}disabled
	{
		background-color: $range-slider-clr-secondary;
		
		> div.#{$prefix}track
		{
			background-color: $range-slider-clr-disabled;
		}
		
		> div.#{$prefix}handle
		{
			cursor: not-allowed;
			
			border-color: $range-slider-clr-disabled;
			box-shadow: none;
		}
		
		> div.#{$prefix}steps
		{
			> span.#{$prefix}dot
			{
				cursor: not-allowed;
				
				border-color: $range-slider-clr-disabled;
			}
		}
	}
	
	&.#{$prefix}vertical
	{
		width: 14px;
		height: 100%;
		padding: 0 5px;
		
		> div.#{$prefix}rail
		{
			width: 4px;
			height: 100%;
		}
		
		> div.#{$prefix}track
		{
			left: 5px;
			bottom: 0;
			
			width: 4px;
		}
		
		> div.#{$prefix}handle
		{
			margin-bottom: -7px;
			margin-left: -5px;
		}
		
		> div.#{$prefix}marks
		{
			top: 0;
			left: 18px;
			
			height: 100%;
		}
		
		> div.#{$prefix}steps
		{
			width: 4px;
			height: 100%;
			
			> span.#{$prefix}dot
			{
				left: 2px;
				
				margin-bottom: -4px;
			}
		}
	}

	> span.#{$prefix}tip
	{
		$arrow-half-width: 3px;
		$arrow-height: 6px;
		
		position: absolute;
		bottom: calc(100% + #{$arrow-height});
		left: 50%;
		z-index: 15;
		
		box-sizing: border-box;
		min-width: 24px;
		padding: 0 6px;
		
		line-height: 24px;
		text-align: center;
		white-space: nowrap;
		
		pointer-events: none;
		
		color: $range-slider-clr-tooltip-fg;
		background: $range-slider-clr-tooltip-bg;
		
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
		
		transform: translateX(-50%) scale(0);
		transform-origin: center calc(100% + #{$arrow-height});
		
		transition-property: transform;
		transition-duration: 0.1s;
		transition-delay: 0.1s;
		transition-timing-function: ease-in;
		
		&::after
		{
			$clr-transparent: rgba($range-slider-clr-tooltip-bg, 0);
			
			position: absolute;
			top: 100%;
			left: 50%;
			
			width: 0;
			height: 0;
			margin-left: -$arrow-half-width;
			
			content: "";
			
			border-width: $arrow-height $arrow-half-width 0;
			border-color: $range-slider-clr-tooltip-bg $clr-transparent $clr-transparent;
			border-style: solid;
		}
	}

	> span.#{$prefix}tip.#{$prefix}tip-display-true
	{
		transform: translateX(-50%) scale(1);
		transition-timing-function: ease-out;
	}

	> span.#{$prefix}tip.#{$prefix}tip-dragging-true .tip-indicator
	{
		display: none;
	}

	> span.#{$prefix}tip .tip-indicator
	{
		display: block;
		position: absolute;
		width: 2px;
		height: 6px;
		z-index: 5;
		left: calc(50% - 1px);
		bottom: -12px;
	}
}