4

jQuery ui-slider を使用しています。範囲スライダーで、両方のハンドルを使用して同じ範囲を選択すると、一方のハンドルがもう一方のハンドルの後ろに隠れます。同じ範囲が選択されている場合は、両方のハンドルを満たしたいだけです。親切に私を助けてください。

$("#dvSliderRange2").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 40],
    step: 10,
    slide: function(event, ui) {
        if (ui.values[0] == ui.values[1]) {
            return false;
        }
        $("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);
    }
});​
4

1 に答える 1

1

以下のCSSを使用したソリューションがあります。これにより、要素が等しい場合に要素にクラスが追加されます。Css は、これらのハンドルを両方とも見えるように配置します。

http://jsfiddle.net/dhQk/jTx89/

ただし、インタラクティブの場合。スライダーのコードを変更しないと不可能です。jquery スライダー 1.10.2 の src を含めました。srcの176行目から。

this.handles.each(function( i ) {
    var thisDistance = Math.abs( normValue - that.values(i) );
    if (( distance > thisDistance ) ||
        ( distance === thisDistance &&
            (i === that._lastChangedValue || that.values(i) === o.min ))) {
        distance = thisDistance;
        closestHandle = $( this );
        index = i;
    }
});

これからわか​​るように、ハンドルは実際にどのハンドルを選択するかによって選択されるのではなく、クリックした場所の距離によってプログラムによって選択されます。なぜこれが彼らのやり方であると決定されたのかはわかりませんが、それらが同じ値になると、それらと個別にやり取りすることはできません。

于 2013-04-13T00:25:47.077 に答える