通过javascript创建基于图表的多个滑块

Question

我正在通过Javascript创建一个四合一工具，我想为这个四合一工具上的每个点创建四个滑块。

图表上的点现在是可拖动的，我想为图表上的每个点创建滑块，一旦我将值滑动到想要的值，图表上的点将自动更改。幻灯片范围将基于我在另一个文件中的数据，现在使用[0,100,20]。我有滑块的HTML格式，但实际的滑块不起作用。 这是我的滑块部分，我不知道它不起作用 http://jsfiddle.net/dz5q7Lg8/1

  function showValues() {
    $('#slider1').html(chart.options.chart.Series1);
    $('#slider2').html(chart.options.chart.Series2);
    $('#slider3').html(chart.options.chart.Series3);
    $('#slider4').html(chart.options.chart.Series4);
         }
//Activate the sliders

$('#slider1').on('change', function () {
    chart.options.chart.Series1 = this.value;
    showValues();
    chart.redraw(false);
});
$('#slider2').on('change', function () {
    chart.options.chart.Series2 = this.value;
    showValues();
    chart.redraw(false);
});
$('#slider3').on('change', function () {
    chart.options.chart.Series3 = this.value;
    showValues();
    chart.redraw(false);
});
$('#slider4').on('change', function () {
    chart.options.chart.Series4 = this.value;
    showValues();
    chart.redraw(false);
});

showValues();