Как реализовать диапазон цен?

Question

[Webdozerz]

Есть тег span с текстом Цена и с функцией toggle (аля выпадающее меню), в котором находится два input'a с placeholder'aми Цена от и Цена до. Необходимо, что бы при вводе данных, в input, они, данные, появлялись в span вместо надписи Цена.
Так вот. Есть решения с jquert slider ui, но они мне не подходят. Правильно ли я понимаю реализацию? :

<input type="text" id="txt1" placeholder="Цена от">
<span id="txtprev1"></span>

oninput = function() {
document.getElementById('txtprev1').innerHTML = document.getElementById("txt1").value;
};

Answer 1

[Юпитер Макс]

на js не знаю как сделать, на jquery так

$('input').on('input keyup', function() {
var price = $(this).val()
$('span').html(price);
});

https://jsfiddle.net/s8vhfc4m/

Comments

[Webdozerz]

Благодарю за ответ. Не подскажете ещё, как добавить слово "от" до вывода значения price? Пробовал .text("от").html(price), но это не помогает.

[Юпитер Макс]

$('span').html('<b>от</b> '+price);

но это в том случае, если "от" должно появляться динамически, во время ввода значения.

если же нет, то можно просто в html сделать сразу

<input type="text" />
<div>от <span>Price</span></div>

Answer 2

[Максим]

на официальном сайте jQuery есть такой готовый plugin :
1) jqueryui.com/slider/#range
2) jqueryui.com/slider/#range-vertical

Comments

[Webdozerz]

Есть решения с jquert slider ui, но они мне не подходят.