帶有用於范圍值的顏色標記的自定義范圍滑塊

Question

我制作了這個范圍滑塊。 滑塊按我的意願移動。 在這種情況下，如何獲得切換位置的值？

比如toggle在1范圍內時，div應該是“The value selected: 1”等等。

 $("#slider").slider({ value: 50 })

 #green { background: green; width: 100%; /* margin-left: 100px; */ height: 14px; } #blue { background: blue; width: 100%; /* margin-left: 100px; */ height: 14px; } #pink { background: pink; width: 40%; /* margin-left: 100px; */ height: 14px; } #yellow { background: yellow; width: 100%; /* margin-left: 100px; */ height: 14px; } #slider { background: red; display: flex; }

 <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css"> <div id="slider"> <div id="green" class="ui-corner-all">1</div> <div id="blue" class="ui-corner-all">2</div> <div id="yellow" class="ui-corner-all">3</div> <div id="pink" class="ui-corner-all">4</div> </div>

js小提琴代碼

Answer 1

在API 文檔中，您可以找到

$( "#slider" ).on( "slidechange", function( event, ui ) {
    let index = Math.ceil($(this).slider("option", "value")/10000*340)-1;
    let selected = $("div#slider").children().eq(index).text();
});