Chartjs-Implementing range slider in Chart.js

Can you still get motivated to solve this problem?
It’s an easy thing, really. However, you need to understand a little bit more how it works.

First of all, you wrote this code on the $(document).ready, that means this code is only ran after page ready.(once)
There’s no way that the chart is updated.

var heating[] = parseInt(document.querySelector('#points').value);

Also, you added event.

<input type="range" class="slider" value="5" min="30" max="50" id="points" onchange="function()">

This fact shows me you really don’t understand things.
Usually, you need to call a function, like this.

<input type="range" class="slider" value="5" min="30" max="50" id="points" onchange="testFunction()">

function testFunction() {
    // update chart...
}

Or add event (this time I use jQuery)

<input type="range" class="slider" value="5" min="30" max="50" id="points">

$("#points").on("change", function() {
    // update chart...
});

Lastly, to update Chart.js, you need to update the value in the datasets, and call its update method. You can updated a just one datasets.

// Get heating datasets. (Yes, you can write 'barGraph.data.datasets[7].data = xxx')
var heatDatasts = barGraph.data.datasets[7];
// Update value
heatDatasts.data = [$(this).val()];
// Apply it to the view.
barGraph.update();

If you can’t use a debug tool, I recommend at least use an alert.
(I used in the jsfiddle)
That way you can tell either the code is run or not.

Example

UPDATED1
For first question.
I updated the image, and I hope you understand.
There are various way, but I pick up the two.

/*************** Pattern1 (Simply, using jQuery each) ***************/
// Loop
$.each(barGraph.data.datasets, function() {
    // Check the label or stack, in this case.
    if (this.label === "Heating Electrification") {
        // It's okay
        // heatDatasets = this;
        // Set value is also okay.
        this.data = [sliderValue];
        return false;
    }
});
 /*************** Pattern2 (using jQuery grep or filter)***************/
 var heatDatasets = $.grep(barGraph.data.datasets, function(datasets) {
     return (datasets.label === "Heating Electrification");
 })[0];
 heatDatasets.data = [sliderValue];

The second question.
Basically, we don’t use JavaScript variable on HTML.
Some framework or library can looks like it can be possible, though.

// Set value, min and max.
// We can't use JavaScript variable on HTML, usually.
var slider = $("#points");
slider.prop("min", 0);
slider.prop("max", 1000);
slider.val(1000);

For example

UPDATED2
I found that datasets can have any parameters, so you can add parameters anything.
For example, I added ‘barId’ and modified the sliders(add id, which is the same as ‘barId’.)
For example