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,0.06)
}
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);
}
<input id="slider" value="0" />