9

NoUISlider は素晴らしいプラグインですが、ツールチップが互いに重ならないようにしたいと思います。重複するツールチップを除いて、次の機能があります。

$("#slider").noUiSlider({
range: { min: 0, max: 100 },
step: 5,
connect: true,
start: [ 20, 50 ]
});

$("#slider").Link('lower').to('-inline-<div class="tooltip"></div>', function(value){
$(this).text(  "From: "+value );
});


$("#slider").Link('upper').to('-inline-<div class="tooltip"></div>', function(value){
$(this).text(  "From: "+value );
});

http://jsfiddle.net/q5651786/2/

私はこのようなものがいいと思っています: http://ionden.com/a/plugins/ion.rangeSlider/demo.html

誰でも手がかりを得ましたか？

4

1 に答える 1

2

下限値と上限値の差に基づいて、ツールヒントの 1 つを非表示にし、他のツールヒントに両方の値を表示します。（もちろん、スタイリングを少し変更して、正しく配置します）。

また、ツールチップが 1 になる値をハードコーディングしました。これは、差が<= 5の場合です。その値では、ツールチップが重なっているように見えるためです。独自のマジック ナンバーを思いつくことができます。(いくつかのスタイルの変更も必要になります)。

function sliderHandler(value, handle, slider){
    var values = slider.val();

スライダーは、下限値と上限値 [20.0, 40.0] の配列を出力します。

    var othertooltip = $('.tooltip').not($(this));

.not()を使用して他のツールチップの参照を取得する

値の差が <= 5 (重複するツールチップのマジック ナンバー) の場合、他のツールチップを非表示にして、低い値と高い値の両方を表示します。

    if(values[1]-values[0] <= 5){
        othertooltip.hide(); // <--- this hides the other tooltip
        $(this).text("From: " + values[0] + '-' + values[1]) <--- this shows both the values 
        .css({ // <--- styles appropriately
            'width': '80px',
            'left': '-20px'
        });

ツールチップが離れている場合は、他のツールチップを表示し、css をリセットして、それぞれの上限値と下限値を表示します

    }else{
        othertooltip.show(); // <--- show other tooltip
        $(this).text("From: " + value) // <--- display only local value
        .css({ // <--- reset the styling
            'width': '50px',
            'left': '-9px'
        });
    }
}

関数は全体的にこのようになります

var slider = $("#slider").noUiSlider({
    range: {
        min: 0,
        max: 100
    },
    step: 5,
    connect: true,
    start: [20, 50]
}).Link('lower').to('-inline-<div class="tooltip"></div>', sliderHandler)
  .Link('upper').to('-inline-<div class="tooltip"></div>', sliderHandler);

function sliderHandler(value, handle, slider){
    var values = slider.val();
    var othertooltip = $('.tooltip').not($(this));
    if(values[1]-values[0] <= 5){
        othertooltip.hide();
        $(this).text("From: " + values[0] + '-' + values[1])
        .css({
            'width': '80px',
            'left': '-20px'
        });
    }else{
        othertooltip.show();
        $(this).text("From: " + value)
        .css({
            'width': '50px',
            'left': '-9px'
        });
    }
}

デモ

http://jsfiddle.net/dhirajbodicherla/q5651786/4/

お役に立てれば

var slider = $("#slider").noUiSlider({
    range: {
        min: 0,
        max: 100
    },
    step: 5,
    connect: true,
    start: [20, 50]
}).Link('lower').to('-inline-<div class="tooltip"></div>', sliderHandler)
.Link('upper').to('-inline-<div class="tooltip"></div>', sliderHandler);

function sliderHandler(value, handle, slider){
    var values = slider.val();
    var othertooltip = $('.tooltip').not($(this));
    if(values[1]-values[0] <= 5){
        othertooltip.hide();
        $(this).text("From: " + values[0] + '-' + values[1])
        .css({
            'width': '80px',
            'left': '-20px'
        });
    }else{
        othertooltip.show();
        $(this).text("From: " + value)
        .css({
            'width': '50px',
            'left': '-9px'
        });
    }
}
.tooltip {
	display: block;
	position: absolute;
	border: 1px solid #D9D9D9;
	font: 400 12px/12px Arial;
	border-radius: 3px;
	background: #fff;
	top: -43px;
	padding: 5px;
	left: -9px;
	text-align: center;
	width: 50px;
}
.tooltip strong {
	display: block;
	padding: 2px;
}
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.css" rel="stylesheet"/>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<div id="slider" style="margin-top: 50px"></div>

于 2015-06-15T14:38:18.773 に答える