Трек бар для дат и прочих пользовательских полей

[Zdesign]

существует ли такой плагин? чтоб ползунком даты и прочее ставить. ценник легко, содрал с шаблона другого) а вот как с остальным

 

[centurion]

По примеру могли бы догадаться, нужно то 3 подключения всего, вот вам пример ползунка по цене.
Сам ползунок в HTML обертке:

  <?php if( osc_price_enabled_at_items() ) { ?>
				<label> Price
				<div class="ui-slider-box" >
					<div id="price-range"></div>
					<input type="text" id="priceMin" name="sPriceMin" value="<?php echo osc_search_price_min() ; ?>" size="6" maxlength="6" class="min" />
					<input type="text" id="priceMax" name="sPriceMax" value="<?php echo osc_search_price_max() ; ?>" size="6" maxlength="6" class="max"/>
				</div>
				</label>
				<?php } ?>

Стили:

.ui-slider{margin:0;position:relative;margin-top:10px}
.ui-slider-range{position:absolute;background-color:#29b4d4;height:5px;border:solid 1px #229ab5}
.ui-slider{background-color:#fff;height:5px;border:solid 1px #d9dde2;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px}
.ui-slider-horizontal .ui-slider-handle{background:#29b4d4;border:solid 1px #239ab5;height:15px;top:-6px;margin-left:-2px;width:15px;position:absolute;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;margin-left:-7px}
.ui-slider-box{position:relative;height:50px}
.ui-slider-box .max{right:0}
.ui-slider-box .min{left:0}
.ui-slider-box .min,.ui-slider-box .max{position:absolute;top:15px;border:solid 1px #d9dde2;height:26px;width:50px;text-align:center;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:13px;color:#595959}

JS код:

   <script type="text/javascript">
$(function() {
 
	//price range
	$("#price-range").slider({
		range: true,
		min: 0,
		max: 10000,
		step: 500,
		values: [0, 10000],
		slide: function(event, ui) {
			$('#priceMin').val(ui.values[0]);
			$('#priceMax').val(ui.values[1]);
		},
		create:function(){
			var values = $(this).slider( "option", "values" );
			$('#priceMin').val(values[0]);
			$('#priceMax').val(values[1]);
		}
	});
 
	$("#sidebar .form-hook .slider").each(function(){
		var thatElement = $(this);
		var thatSlider = thatElement.children('div');
		var minValue = $('<input type="text" class="min" readonly/>');
		var maxValue = $('<input type="text" class="max" readonly/>');
		thatElement.removeClass('slider').addClass('ui-slider-box').append(minValue,maxValue);
		thatSlider.bind( "slide", function(event, ui) {
			minValue.val(ui.values[0]);
			maxValue.val(ui.values[1]);
		}).bind( "slidecreate", function() {
			var values = $(this).slider( "option", "values" );
			minValue.val(values[0]);
			maxValue.val(values[1]);
		});
 
	});
  });
</script>

Если верно подключите работать будет без проблем.

 

[Zdesign]

Спасибо огромное. сейчас попробую