{% load i18n l10n %}

<style type= 'text/css'>

	.tag_slider{
/*		border: 3px solid blue;*/
		color: #f6931f;
		font-weight:bold;
		
		width: 40px;
		margin: 2px 2px 5px 2px;
	}

	.text_slider{
		font-weight: bold;
		padding: 2px 2px 5px 2px;

	}

	.tag_slider_button{
/*		border: 3px solid yello*/w;

	}

	.slider_container{
		border:1px solid grey;
		padding:5px ;
		border-radius:5px;
  		text-align:center;
  		width:91px;
	}



</style>

{% get_current_language as LANGUAGE_CODE %}

<div id="{{view_name}}_div_slider" class="slider_container">

		{% if rang == 'true' %}
			<div id ='{{name_slider}}_title_slider' class="text_slider" >
				<label for="slider_range" class="text_slider">{{text_slider}}</label>
			</div>
				<input type="text" id="{{name_slider}}_slider_range" class='tag_slider' />
			<div id="{{name_slider}}_tag_slider_range" class="tag_slider_button"> </div>
		{% else %}


				{% if vertical == 'true' %}
					<div id ='{{name_slider}}_title_slider' class="text_slider" >
						<label for="slider" >{{text_slider}} </label>
					</div>
					<input type="text" id="{{name_slider}}_slider" class='tag_slider' />
				{% else %}

					<div id ='{{name_slider}}_title_slider' class="text_slider" >
						<label for="slider" >{{text_slider}} </label>
						<input type="text" id="{{name_slider}}_slider" class='tag_slider' />
					</div>
					
				{% endif %}
	

			<div id="{{name_slider}}_tag_slider" class="tag_slider_button"></div>
		{% endif %}
</div><!-- /Shortcuts -->

<script type="text/javascript" lang="text/javascript">

//	$("#{{view_name}}_div_shortcuts_radio label").removeClass('ui-state-active');

// def tag_slider(view_name,name_slider,position,rang,min_val,max_val,default_min,default_max,unit):

 $("#{{name_slider}}_tag_slider").mouseup(function(){
 	var slider_val = $("#{{name_slider}}_slider" ).val( );
 	{{view_name}}_callback('{{name_slider}}_slider');
})

 $("#{{name_slider}}_tag_slider_range").mouseup(function(){
 	var slider_val = $( "#{{name_slider}}_slider_range" ).val( );
 	{{view_name}}_callback('{{name_slider}}_slider');
})







// $(function() {


	 $( "#{{name_slider}}_tag_slider" ).slider({
		orientation: '{{position}}',
		range: "min",
		min: {{min_val}},
		max: {{max_val}},
		value: '{{default_min}}',
		slide: function( event, ui ) 
		{
			$( "#{{name_slider}}_slider" ).val( ui.value +' '+'{{unit}}'  );
		},
		change:function( event,ui )
		{
			// console.log('change');
		},
		create:function( event,ui)
		{
			// console.log('create');
		},
		start:function(event,ui)
		{
			// console.log('start');
			// {{name_slider}}_tag_slider_start();
			$('#{{view_name}}_div_grid_container').block();

		},
		stop:function(event,ui)
		{
			// {{name_slider}}_tag_slider_stop();

			$('#{{view_name}}_div_grid_container').unblock();

		}
	});

	$( "#{{name_slider}}_slider" ).val( $( "#{{name_slider}}_tag_slider" ).slider( "value" ) +' '+'{{unit}}');

	$( "#{{name_slider}}_tag_slider_range" ).slider({
		range: true,
		orientation:'{{position}}',
		min: {{min_val}},
		max: {{max_val}},
		values: ['{{default_min}}','{{default_max}}'],
		slide: function( event, ui ) 
		{
			$( "#{{name_slider}}_slider_range" ).val( ui.values[ 0 ] + '-' + ui.values[ 1 ]+' '+'{{unit}}' );
		}
	});

	$( "#{{name_slider}}_slider_range" ).val(  $( "#{{name_slider}}_tag_slider_range" ).slider( "values", 0 ) + '-'+
	+ $( "#{{name_slider}}_tag_slider_range" ).slider( "values", 1 ) +' '+'{{unit}}' );
// });




function {{view_name}}_tag_slider_start(){};



function {{view_name}}_tag_slider_stop(){};

</script>