CODEWITHSUNDEEP
htmlslider
HansPeterLoft
HansPeterLoft

Reputation: 509

HTML input range slider call function when stop sliding

I have a slider implemented in HTML:

<input type="range" onchange="app.setSpeed()" name="slider1" id="slider1" value="0" min="0" max="255" />

It incrementally calls my function app.setSpeed(). But how can I call the function just at the release of the slider? I saw there should exist something like on-handle-up, but that does not work in my HTML version.

Upvotes: 2

Views: 3117

Answers (2)

NiKoLaPrO
NiKoLaPrO

Reputation: 624

It's possible with jQuery .click() or .change() functions:

$('#range').change(function() {
  $('div').html( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="range">
<div></div>

Fiddle

You can also do it with pure **JavaScript*:

function addEvent(el, name, func, bool) {
	if (el.addEventListener) el.addEventListener(name, func, bool);
	else if (el.attachEvent) el.attachEvent('on' + name, dunc);
	else el['on' + name] = func;
}
addEvent(range, 'change', function(e) {
	myText.innerHTML = e.target.value;
}, false);
<input type="range" id="range">
<div id="myText"></div>

Fiddle

Hope that helped.

Upvotes: 4

Gaurav Jhaloya
Gaurav Jhaloya

Reputation: 96

You can use jQuery range slider because it provides such functionality.

Upvotes: -2

Related Questions