web-dev-qa-db-ja.com

スライダーの下のjQuery UIスライダーラベル

JQuery 1.4.2とjQuery ui 1.8.5の使用に制限されています（これは選択によるものではありません。最新バージョンへのアップグレードを求めないでください）。スライドバーの上に現在の値を表示するスライダーを作成しましたが、今必要なのは、スライダーと同じ距離にあるスライドバーの下に凡例を挿入する方法です（つまり、スライダーの幅が100ピクセルで5つの値がある場合）スライダーは20pxごとにスナップします。この例では、凡例の値を20px間隔で配置します）。

ここに私が欲しいものの例があります：

Slider

ここに私が持っているjQueryがあります（UIスライダーデモページから同化）：

//select element with 5 - 20 options
var el = $('.select');

//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
    min: 1,
    max: el.options.length,
    range: 'min',
    value: el.selectedIndex + 1,
    slide: function( event, ui ) {
      el.selectedIndex = ui.value - 1;
      slider.find("a").text(el.options[el.selectedIndex].label);
    },
    stop: function() {
      $(el).change();
    }
});

slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
jqueryjquery-uijquery-ui-slider
37
Richard Parnaby-King

凡例を作成するには、スライダーの幅と要素の数を知ってから、一方を他方に分割する必要があります。

//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
  options.Push(option.label);
}

//how far apart each option label should appear
var width = slider.width() / (options.length - 1);

//after the slider create a containing div with p tags of a set width.
slider.after('<div class="ui-slider-legend"><p style="width:' + width + 'px;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>');

Pタグは、正しく表示するためにスタイル 'display：inline-block'を持っている必要があります。そうでない場合、各ラベルは1行かかるか、ラベルが隣り合わせに積み重ねられます。

問題と解決策を説明する投稿を作成しました： jQuery UI Slider Legend Under Slider には、この動作のライブデモが含まれています。

21
Richard Parnaby-King

投稿されたソリューションは完全に機能しますが、追加のプラグインを必要とせずにこれを生成する別のソリューションがあります（ fiddle を参照）。

a slider with simple labels

方法は次のとおりです。

  1. スライダーを開始します。

  2. 可能な値ごとに、label要素にposition: absoluteを追加します（スライダーは既にposition: relativeであるため、ラベルはスライダーに対して相対的に配置されます）。

  3. labelごとに、leftプロパティをパーセンテージに設定します。

CSS

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

JS

// A slider with a step of 1
$("#slider").slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1
})
.each(function() {

    // Add labels to slider whose values 
    // are specified by min, max

    // Get the options for this slider (specified above)
    var opt = $(this).data().uiSlider.options;

    // Get the number of possible values
    var vals = opt.max - opt.min;

    // Position the labels
    for (var i = 0; i <= vals; i++) {

        // Create a new element and position it with percentages
        var el = $('<label>' + (i + opt.min) + '</label>').css('left', (i/vals*100) + '%');

        // Add the element inside #slider
        $("#slider").append(el);

    }

});
64
chrisfargen

同じものを探していて、フィラメントグループのjQuery UIスライダーを使用することになりました（魅力のように動作し、安定しているように見えます） jQuery UIコンポーネントに...

ここで記事と例への参照+最小化されたjsfiddle

Select要素のjQuery UIスライダー-ARIAサポート付き

これはフィラメントグループラボの記事の例です

最小化されたjsfiddleの動作例-Updated and Working

b.t.wシンプルなスライダー（範囲なし）を使用する場合は、2番目のselect要素を削除するだけです。

仕事をする別の素敵なプラグイン： jslider

12
Daniel

カスタムラベルと固定ラベルサイズなしのもう1つのソリューション。

JS Bin

7
Nazar Tereshkovych

Jqueryのみを使用したラベル付きスライダーの簡単なソリューションがあります。

enter image description here

スライダーを移動したい場所にdivを設定するだけです

<div class="sliderWithLabels" id="mySlider1"></div>

次に、関連するインデックスのスライダーにラベルを追加するセットアップメソッドを呼び出します。

// setupSlider(divId, labelArray, initialIndex);
setupSlider('mySlider3', ["label1", "label2", "label3", "label3"], 3);

完全なコードについては、以下のコードペンを参照してください

https://codepen.io/larnott/pen/WNeErqE

0
user3284707