WebStackPage.github.io/assets/less/xenon-less/forms-sliders.less

html body {

	// Range Slider
	.ui-rangeSlider {
		@h: 10px;
		@bg: @secondary-color;
		@border: 2px;
		
		.ui-rangeSlider-container {
			height: @h;
			background: #ebebeb;
			.border-radius(@border-radius-base);
		
			.ui-rangeSlider-bar {
				background: @bg;
				height: @h;
			}
			
			.ui-rangeSlider-handle {
				position: relative;
				background: @bg;
				.size(@h);
				.border-radius(@border-radius-base);
				border: 0px solid #FFF;
				padding: @h - 2;
				margin-top: -@h/2 - @border;
				
				&.ui-rangeSlider-leftHandle {
					.translateX(-100px);
				}
				
				&.ui-rangeSlider-rightHandle {}
			}
		}
			
		.ui-rangeSlider-label  {
			visibility: hidden;
		}
	}
	
	
	.slider {
		@bg: #ebebeb;
		@range-bg: @secondary-color;
		@border: #fff;
		@s: 8px;
		
		background: @bg;
		height: @s;
		margin-bottom: @default-padding;
		.border-radius(@border-radius-base);
		
		.ui-slider-handle {
			background: @range-bg;
			top: -3px;
			border: 0;
			.size(@s + 6);
			margin-top: 0;
			outline: none;
			cursor: pointer !important;
			
			+ .ui-slider-handle { // Right Handle
				
			}
			
			.ui-label {
				position: absolute;
				left: -50%;
				top: @s + 10px;
				color: darken(@main-text-color, 10%);
				margin-left: @s/2;
				white-space: nowrap;
			}
		}
		
		.ui-slider-range {
			background: @range-bg;
			.border-radius(@border-radius-base);
		}
		
		&.ui-slider-horizontal {
			
			.ui-slider-handle {
				
				.ui-label {
					margin-top: 0px;
				}
			}
		}
		
		&.ui-slider-vertical {
			height: 250px;
			width: @s;
			
			.ui-slider-handle {
				top: auto;
				margin-left: 0.5px;
				
				.ui-label {
					top: -1px;
					left: @s + 10px;
				}
			}
		}
		
		.slider-variant(@bg; @range-bg; @border);
		
		
		&.slider-primary { .slider-variant(@bg; @brand-primary; #fff); }
		&.slider-secondary { .slider-variant(@bg; @secondary-color; #fff); }
		&.slider-success { .slider-variant(@bg; @brand-success; #fff); }
		&.slider-info { .slider-variant(@bg; @brand-info; #fff); }
		&.slider-danger { .slider-variant(@bg; @brand-danger; #fff); }
		&.slider-warning { .slider-variant(@bg; lighten(#f7d227, 10%); #fff); }

		&.slider-purple { .slider-variant(@bg; @xe-purple; #fff); }
		&.slider-blue { .slider-variant(@bg; @xe-blue; #fff); }
		&.slider-red { .slider-variant(@bg; @xe-red; #fff); }
		&.slider-gray { .slider-variant(@bg; darken(@xe-gray, 25%); #fff); }
		
	}
}



// Slider Variant
.slider-variant(@bg; @range-bg; @border)
{
	background: @bg;
	
	.ui-slider-handle {
		background: darken(@range-bg, 10%);
		border: 0;//2px solid @border;
	}
	
	.ui-slider-range, .ui-fill {
		background: @range-bg;
	}
}