D3 jQuery range slider does not work
Question
I have searched stackoverflow but I couldn't find a solution for my case.
I am doing a simple interactive visualization with D3. I want to include a range slider for users to select a range. Then create a filter function that filters the data based on the selected range and updates the visualization. The range slider just does not show up in my browser (both Chrome and Safari).
Relevant code:
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="layout">
<div id="title">
<p>Stocks Scatterplot</p>
</div>
<div id="visualization">
<div id="controls">
<!--create the sliders here-->
<p>Assists</p>
<div id="assists" class="d3-slider"></div>
<label for="assistamount">Assists range:</label>
<input type="text" id="assistamount" readonly style="border:0; color:#f6931f;
font-weight:bold;">
</div>
</div>
</div>
</body>
jQuery:
$(function() {
$("#assits").slider({
range: true,
min: 0,
max: maxAssists,
values:[0,maxAssists],
slide: function(event, ui) {
$("#assistamount").val(ui.values[0]+"-"+ui.values[1]);
filterAssists(ui.values);}
});
$("#assistamount").val($("#assits").slider("values",0) + "-" + $("#assits").slider("values",1));
});
Any thoughts? Thanks in advance.
1 answers
solution1
0 2017-02-13 03:53:45
You have a typo!!
$("#assits") should be $("#assists") . I guess you have defined maxAssests before the slider definition as well.
Also use more up to date versions of jquery & ui. I got your code to work with these.
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.