How to move or set a d3.js slider handle

Question

I have a d3.js slider handle that I need to move to appropriate tick mark when a calculation is performed on click event. Right now, this is how it looks on page load:

Then I perform a calculation using a javascript which results in this value:

var sl1 = (100 * ((ec1.value + ec[3].value / ec[0].value)).toFixed(0);

Now, I want to move the handle to match the sl1 calculated value. I'm using the following:

<!--sliders-->
<link href="~/d3/d3-slider.css" rel="stylesheet" type="text/css" media="all" />
<script src="~/d3/d3.slider.js" type="text/javascript"></script>

<div id="slider1Div" style="margin: 0 auto;height:auto;">
    <p style="margin-bottom:5px;text-align:center;">
        Percent of Cropland With One or More Structural Practices<br />
        <h12><span id="slider1text">0</span></h12>
    </p>
    <div id="swift1Slider" class="greenLeft" style="width:80%;margin: 0 auto;">
</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
      d3.select("#swift1Slider").call(d3.slider().axis(true).value([0]).on("slide", function (evt, value) {
        var sliderVal1 = value.toFixed(2);
        d3.select('#slider1text').text(sliderVal1);            
    }))

    //populate sliders
    var sl1 = (100 * ((ec[1].value + ec[3].value) / ec[0].value)).toFixed(0);

     //move the slider handle
    d3.select('#slider1text').text(sl1);
    d3.select("#swift1Slider").attr("value", sl1);
    d3.select("#swift1Slider").call(slider1);
});

Problem is, it keeps adding a new handle every time a user clicks. It looks like below:

How do I make the handle "refresh" or just display a single handle instead of continuously adding a new one?

Appreciate any response.

score 0 · Answer 1 · answered Mar 09 '17 at 17:27

Never mind. I have multiple sliders, which I didn't show above. The solution is fairly simple:

//calculate values:
var sl1 = (100 * ((ec[1].value + ec[3].value) / ec[0].value)).toFixed(0); 
var sl2 = (100 * ((ec[2].value + ec[3].value) / ec[0].value)).toFixed(0); 
var sl3 = (100 * (ec[7].value / myTotal)).toFixed(0);                       //urban

            d3.select('#slider1text').text(sl1);
            d3.select('#slider2text').text(sl2);
            d3.select('#slider3text').text(sl3);

            //move the handle   
            d3.selectAll("#handle-one").remove();
            var slider1 = d3.slider().value(sl1);
            d3.select("#swift1Slider").call(slider1);

            var slider2 = d3.slider().value(sl2);
            d3.select("#swift2Slider").call(slider2);

            var slider3 = d3.slider().value(sl3);
            d3.select("#swift3Slider").call(slider3);

The key was d3.selectAll("#handle-one).remove(); Since I had 3 sliders, all the class "d3-slider-handle" was automatically named by d3.slider with the same name, "handle-one".

Hope this helps someone.

How to move or set a d3.js slider handle

1 Answers1