2017-01-09 1 views
0

Im ищет обработчик события, в котором я держу переключатель, и либо перемещаю его влево, чтобы уменьшить значение числа, либо переместить его вправо и увеличить значение числа. Ссылки на документацию будут приятными.Есть ли способ увеличить или уменьшить число с помощью переключателя в Javascript?

Благодаря

EDITED

Так благодаря пользователям на этот пост, я придумал этот способ вместо

<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title> 
<script type="text/javascript"> 

function mySlideChange(){ 
var sliderValue = document.getElementById("slider").value; 
var display = document.getElementById("display"); 

display.innerHTML = sliderValue; 
} 
</script> 
</head> 
<header> 

</header> 

<body> 

<input type="range" min="0" max="100" step="1" value="50" id="slider"   

onchange="mySlideChange()"> 
<span id="display">50</span> 

</body> 

</html> 
+1

вы имеете в виду слайдер? – hackerrdave

+0

Я думаю, вы должны использовать событие 'onchange' (в jQuery' .change() ') на' input' type 'range' – d3vi4nt

ответ

1

Вы имеете в виду что-то вроде этого?

JavaScript:

var slider = document.getElementById("slider"), 
    display = document.getElementById("display"); 

var value; 

slider.onchange = function(){ 
    value = this.value; 
    display.innerHTML = value; 
} 

или JQuery:

$("#slider").change(function(){ 
    var value = $(this).val(); 
    $("#display").html(value); 
}); 

HTML:

<input type="range" min="0" max="100" step="1" value="50" id="slider"> 
<span id="display">50</span> 
+0

Спасибо за предоставление всех возможных способов. Я имею в виду, что может быть больше, но это работает для меня. Я пытаюсь настроить изображение Hue и Saturation. Благодаря!!! – Carlitos

+0

Добро пожаловать! @Carlitos рад помочь :-) если вы столкнетесь с какими-либо проблемами на этом пути, не забудьте сообщить мне! : D –

+0

Я использовал ваш код и отформатировал его по-разному. Не настоящий поклонник анонимных функций. – Carlitos

1

Да есть. Библиотека rangeslider.js представляет собой небольшой полигон JavaScript/jQuery для элемента слайдера HTML5 <input type="range">.

+0

Вы сказали бы, что поддерживаются всеми браузерами? Заранее спасибо. – Carlitos

+1

Поддерживает все основные браузеры, включая IE8 + – hackerrdave

Смежные вопросы