Slider Change Tone

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<input id="slider" value="0" />

JavaScript

var ctx = new AudioContext(), lastPlayedRate = 0, freq = 261.63;
var slider = $("#slider").kendoSlider({
        increaseButtonTitle: "Right",
        decreaseButtonTitle: "Left",
        min: -10,
        max: 10,
        smallStep: 2,
        largeStep: 1,
        slide: sliderOnSlide,
        change: sliderOnChange
    }).data("kendoSlider");

function sliderOnSlide(e) {
    pingFreq(e)
}
function sliderOnChange(e) {
    pingFreq(e)
}
function pingFreq(e) {
    var rate = freq + (e.value * 32.03);
    
    if (lastPlayedRate != rate) {
        playOsc('triangle',rate,0.5,6)
    }
    lastPlayedRate = rate;
}

function playOsc(type,freq,vol,dur) {
    var o = ctx.createOscillator(), g = ctx.createGain();
    o.type = type;
    o.frequency.value = freq;
    o.start(ctx.currentTime);
    o.stop(ctx.currentTime + dur);

    g.gain.value = vol;
    g.gain.setValueAtTime(1,ctx.currentTime + dur - 0.04);
    g.gain.linearRampToValueAtTime(0,ctx.currentTime + dur);
    o.connect(g);
    g.connect(ctx.destination);
}