添加播放按钮以触发javascript时间滑块?

时间:2018-10-02 20:43:38

标签: javascript jquery d3.js slider

我正在尝试将“播放”按钮添加到我拥有的jQuery时间滑块上。

HTML中的时间滑块元素:

<input id="timeslide" type="range" min="0" max="25" value="0" step="1" /><br>



var inputValue = null;
var years = ["1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009", "2010","2011","2012","2013","2014","2015","2016","2017","2018","2019"];

我构建了一个年份数组,该数组将用于根据当前滑块值对时间滑块进行索引。显示的数据将根据年份而变化。

d3.select("#timeslide").on("input", function() {        
    console.log(value)
    update(+this.value);   
});


function update(value) {

    console.log(value)
    document.getElementById("range").innerHTML=years[value];
    inputValue = years[value];
    console.log(inputValue)


    d3.selectAll(".tenants")
        .attr("opacity", dateMatch);

}

我尝试添加“播放”按钮,以便滑块将自动从头到尾遍历其值的范围:

    <div class="container">
        <button id="play">
            Start
    </button>

    $('#play').click(function(){    
    $("#timeslide").trigger('input');
    },25);

我在这里正确吗?我只需要一个带有事件监听器的按钮,它将触发时间滑块滚动其25个值中的每一个。

0 个答案:

没有答案