Показать пронумерованные интервалы выше JQuery слайдер

Question

Hallo,

Я добавил ползунок JQuery, и теперь я хочу, чтобы иметь номера выше ползунка, который обозначает интервалы. Почти как ежедневный правитель. У кого-нибудь есть быстрый способ сделать это?

Answer 1

Посмотрите на этот плагин JQuery UI: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Это на самом деле более сложная версия пользовательского интерфейса JQuery слайдер, созданный теми же людьми, которые поддерживают jQuery UI. Однако это использует HTML-элемент select вместо списков, поэтому вам может понадобиться отключить функцию добавления tic из плагина и использовать это вместо этого (не просто, но это лучше, чем писать собственные, я надеюсь!).

Это то, что плагин использует:

var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)'); 
jQuery(selectOptions).each(function(i){ 
    var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ; 
    var labelText = (options.labelSrc == 'text') ? this.text : this.value; 
    scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>'); 
}); 

Для каждого элемента option он добавляет тик, с этикеткой добавляется еще один блок кода далее вниз. То, что он делает, в основном вводит список пролетов в элемент слайдера, причем текст берется непосредственно из атрибута значения элемента. Вам также понадобится совсем немного CSS, чтобы правильно вписываться в тики.

Answer 2

Я использую этот код.
IMG/current.png - путь к текущему изображению, когда я нажимаю на Click)

function setSlider(selected) { 
$('.slider_item > img').remove(); 
$(selected).html('<img src="img/current.png">'+$(selected).html()); 
} 



<div class="line"> 
     <span onclick="setSlider(this);" class="slider_item left"> 
      0.5 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      1 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      2 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      4 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      8 
     </span><span onclick="setSlider(this);" class="slider_item middle"> 
      16 
     </span><span onclick="setSlider(this);" class="slider_item right"> 
      32 
     </span> 
    </div>