<script>
/**
	A slider for displaying a range of values

		// Can be created dynamically
		var slider = new OreeshSlider();
	
	
		<!-- Or via HTML -->
		<!-- Basic example -->
		<oreesh-slider></oreesh-slider>
		 
		<!-- Slide from both sides -->
		<oreesh-slider multi></oreesh-slider>
		
		<!-- Min and max values -->
		<oreesh-slider min="10" max="100" multi></oreesh-slider>
		
		<!-- Snap to nearest whole number -->
		<oreesh-slider snap></oreesh-slider>
		
		<!-- Snap and multi -->
		<oreesh-slider snap multi></oreesh-slider>
		
		<!-- Snap to nearest multiple of 2 -->
		<oreesh-slider snap snapunit="2"></oreesh-slider>

		<!-- Basic example -->
		<oreesh-slider></oreesh-slider>
		
		<!-- Two slider buttons -->
		<oreesh-slider multi></oreesh-slider>
		
		<!-- Custom width -->
		<oreesh-slider multi style="width: 700px;"></oreesh-slider>

		<!-- min and max values -->
		<oreesh-slider min="10" max="100" multi></oreesh-slider>
		
		<!-- Values will snap to nearest mulitple of 1 -->
		<oreesh-slider snap></oreesh-slider>
		
		<!-- Snap with two buttons -->
		<oreesh-slider snap multi></oreesh-slider>
		
		<!-- Values will snap to nearest multiple of 2 -->
		<oreesh-slider snap multi snap-unit="2"></oreesh-slider>
		
		<!-- Values will snap to either 0, 1, 2, or 10 -->
		<oreesh-slider snap multi snap-values="[0,1,2,10]"></oreesh-slider>

		<!-- Inital values of 2 and 5 -->
		<oreesh-slider multi left-value="2" right-value="5"></oreesh-slider>
		
	The slider also emits events when the sliders are moved
	$slider.on('left-value-change', function(e) {	
		// originalEvent.detail for jQuery, or just e.detail for vanilla javascript
		var val = e.originalEvent.detail;
	});
	$slider.on('right-value-change', function(e) {	
		var val = e.originalEvent.detail;
	});

	@class oreesh-slider
**/
/**
	Sets the minimum value for the range

	@attribute min
	@type Number
	@default 0
**/
/**
	Sets maximum value for the range 
	
	@attribute max
	@type Number
	@default 10
**/
/**
	Allows for sliding both ends of the slider
	
	@attribute multi
	@type Boolean
	@default false
**/
/**
	The slider's value will snap to multiples of the `snap-unit`
	
	@attribute snap
	@type Boolean
	@default false
**/
/**
	Sets the units which the slider will count by, ignored when snapvalues exists
	
	@attribute snap-unit
	@type Number
	@default 1
**/
/**
	Sets the actual values to be snapped
	
	@attribute snap-values
	@type Array
	@default []
**/
/**
	Optionally, sets inital value for left button.  Reflects the current value of the left button.
	
	@attribute left-value
	@type Number
	@default min
**/
/**
	Optionally, sets inital value for right button.  Reflects the current value of the right button.
	
	@attribute right-value
	@type Number
	@default min
**/
</script>

<dom-module id="oreesh-slider">
	<template>
		<link rel="stylesheet" is="custom-style" href="./oreesh-slider.css">
		<div class="gauge-container">
			<div class="gauge-background">
				<div class="gauge"></div>
			</div>
		</div>
		<div class="button-container">
			<img source="<%- svg.handlr_inact %>" tabIndex="0" class="btn btn-left" >
			<img source="<%- svg.handlr_inact %>" tabIndex="0" class="btn btn-right" >
		</div>

		<iron-a11y-keys target="{{btnLeft}}" keys="left right" on-keys-pressed="_btnLeftKeyPress"></iron-a11y-keys>
		<iron-a11y-keys target="{{btnRight}}" keys="left right" on-keys-pressed="_btnRightKeyPress"></iron-a11y-keys>
	</template>
</dom-module>

<script src="./oreesh-slider.js"></script>