具有多個DIV值的JQuery UISlider

我一直在尋找UI滑塊，它會改變多個DIV值，但找不到甚至接近我想要的值。我沒有技術能力從頭開始。有人可以幫忙嗎？具有多個DIV值的JQuery UISlider

此圖片描述了我正在尋找的東西。隨着用戶滑行，多個DIV會發生變化。

2017-05-07 Elaine Byene

您可以通過編寫自己的滑塊功能通過jQuery的滑塊來實現。在這個例子中，文本在50％處改變。如果需要，您可以根據價值調整定位。

$(function() { 
 
    $(".sli3").slider({ 
 
     range: "min", 
 
     value: 50, 
 
     min: 0, 
 
     max: 100, 
 
     slide: function(event, ui) { 
 
      if (ui.value<50) { 
 
       $(".div-1").text("yay"); 
 
       $(".div-2").text("whoo"); 
 
      } else { 
 
       $(".div-1").text("example text 1"); 
 
       $(".div-2").text("example text 2"); 
 
      } 
 
      $(".div-1").css({top:ui.value + "%"}) 
 
     } 
 
    }); 
 
});

.div-1 { 
 
    position:fixed; 
 
    top:50px; 
 
    left:200px; 
 
} 
 

 
.div-2 { 
 
    position:fixed; 
 
    top:100px; 
 
    left:40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="sli3"></div> 
 

 
<div class="div-1"></div> 
 
<div class="div-2"></div>

來源

2017-05-07 02:55:06 Neil

謝謝你這麼多的擡頭。我根據你的代碼創建了一個JSFiddle。我想增加更多的價值，但我無法這樣做。我哪裏錯了？另外，在JS代碼中，第20行是什麼？我在這裏評論過它：https：//jsfiddle.net/gr68e514/ –

更新：我可以設置一個範圍，但我無法得到值顯示20以下。第8-11行之間的行號isn不工作：https：//jsfiddle.net/zombhbsp/1/ –

@ElaineByene https://jsfiddle.net/zombhbsp/4/更新了一個else-if。第20行是爲了證明你可以用滑塊移動位置。 – Neil

具有多個DIV值的JQuery UISlider

回答

相關問題