Chart.js with slider bar

Question

Trying to include slider bars with Chart.js. I tried to follow the code the sgrillion posted but could not get it to work properly. I also wanted to add tooltip to slider handle. Is there another way of accomplishing this without loosing the text or data from each slider? Here is the code and the results: The sample code is on Jsfiddle: I used jquery-ui.css jquery-1.10.js jquery-ui.js Chary.js

index

<div class="titre">Coffee:</div>
    <div id="red"></div>
    <div class="titre">Bun:</div>
    <div id="green"></div>
    <div class="titre">Cake:</div>
    <div id="blue"></div>
    <div class="titre">Tea:</div>
    <div id="yellow"></div>
    <div class="titre">Water:</div>
    <div id="sienna"></div>
    <div class="titre">Donut:</div>
    <div id="gold"></div>
    <div class="titre">Spaghetti:</div>
    <div id="violet"></div>

 <canvas id="canvas" height="300" width="300"></canvas>

I would like to end up with something closer to this: