Можно ли доработать slider jQuery?

Question

[Zombie42679]

Есть стандартный слайдер (бегунок) на jQuery, в примере ниже цифры выводится сама, но можно ли добавить какое-нибудь свойство, чтоб бегунок так же перемещался если ввести цифру с клавиатуры в input с выводом цифры, а не мышкой бегунок передвинуть ? C JavaScript и jQuery проблемы :(

https://jqueryui.com/slider/#rangemax

Вот мой код:

$(function() {
        $("#slr").slider({
            range: "max",
            min: 1,
            max: 10,
            value: 2,
            slide: function(event, ui) {
                $("#lbl").val(ui.value);
            }
        });
        $("#lbl").val($("#slr").slider("value"));
    });

Answer 1

[cssfish]

статья - www.xiper.net/collect/js-plugins/ui/jquery-ui-slider
пример - www.xiper.net/examples/js-plugins/ui/ui-slider

Comments

[Zombie42679]

Спасибо, сейчас попробую

[Zombie42679]

Что не так я делаю ?

$(function() {
        $("#slr").slider({
            range: "max",
            min: 1800000,
            max: 30000000,
            values: [1800000,30000000],
            stop: function(event, ui) {
                $("#lbl").val($("#slr").slider("values", 0));
            },
            slide: function(event, ui) {
                $("#lbl").val($("#slr").slider("values", 1));
            }
    });
    $("#lbl").change(function() {
        var value1 = $("#lbl").val();
    });

[cssfish]

пишите код сюда, а не в фидл

[Zombie42679]

cssfish:

$(function() {
$("#slr").slider({
range: "max",
min: 1800000,
max: 30000000,
values: [1800000,30000000],
stop: function(event, ui) {
$("#lbl").val($("#slr").slider("values", 0));
},
slide: function(event, ui) {
$("#lbl").val($("#slr").slider("values", 1));
}
});
$("#lbl").change(function() {
var value1 = $("#lbl").val();
});

[cssfish]

*facepalm*

[Zombie42679]

cssfish: :))

[cssfish]

в общем пример там один один по вашему вопросу. а вот что вы делаете, это большой вопрос )

[Zombie42679]

cssfish: так там 2 инпута, а у меня 1, там идут проверки на то что один больше другого , а мне это не нужно, мне нужно просто чтоб с клавиатуры значения принимались и всё.

[cssfish]

ну так режем лишнее и все. вы пока понимать что в коде просходит не начнете, вам все эти советы как мертвому припарка. нужно взять значение из инпута и вставить его в лэйбл, условно. а вы присваиваете переменной что-то и все. конечно это не работает.

[Zombie42679]

$(function() {
$("#value_realestate_slr").slider({
range: "max",
min: 1800000,
max: 30000000,
value: 26300000,
slide: function(event, ui) {
$("#value_realestate_lbl").val(ui.value);
}
});
$("#value_realestate_lbl").val($("#value_realestate_slr").slider("value"));
});
$('#value_realestate_slr').change(function() {
var changeValue = $('#value_realestate_slr').val();
$("#value_realestate_lbl").val(changeValue.slider("value"));
});

Что не так делаю? Сейчас же из инпута в лейбл значение вставляю

[cssfish]

- Что не так я делаю ?
- пишите код сюда, а не в фидл :)

[Zombie42679]

cssfish: куда сюда то?)) я не понимаю)

$(function() {
        $("#value_realestate_slr").slider({
            range: "max",
            min: 1800000,
            max: 30000000,
            value: 26300000,
            slide: function(event, ui) {
                $("#value_realestate_lbl").val(ui.value);
            }
        });
        $("#value_realestate_lbl").val($("#value_realestate_slr").slider("value"));
    });
    $('#value_realestate_slr').change(function() {
        var changeValue = $('#value_realestate_slr').val();
        $("#value_realestate_lbl").val(changeValue.slider("value"));
    });

Вот https://codepen.io/anon/pen/XaZKwL еще :)

[cssfish]

ну вот, хотяб б codepen ) html добавьте и можно смотреть

[Zombie42679]

cssfish: А как туда библиотеку из примера подключить ?

[cssfish]

видимо settings-js
в фидле проще :

[cssfish]

но в целом смотрите. вам надо взять из инпута - записать в слайдер
а вы чего делаете?

$('#value_realestate_slr').change(function() {
        var changeValue = $('#value_realestate_slr').val();
        $("#value_realestate_lbl").val(changeValue.slider("value"));
    });

читаете из слайдера и "пишете" в инпут (или что там у вас lbl обозначено). т.е все наоборот вообще. т.е. это слайдер и так делает без этих строк

[Zombie42679]

cssfish: https://jsfiddle.net/0rpb7bem/

Ну вот я их поменял местами, получается в переменную я даю значение inputа, а в последней строке изменяю сам бегунок, но наверное последняя как раз и не работает.

[cssfish]

начнем с первой
$('#value_realestate_slr').change(function() {
что тут написано? написано, что мониторим значение слайдера. какого черта? вы ж пишите что вам значение инпута мониторить нужно - $("#value_realestate_lbl")
понимаете? :)

[Zombie42679]

cssfish: дада, я же поменял уже на jsfiddle

[cssfish]

там сохранять надо - update

[Zombie42679]

cssfish: мой косяк, поправил

[cssfish]

адрес меняется при этом (
ладно, ухожу, вникайте
https://jsfiddle.net/80k2g6cv/

[Zombie42679]

cssfish: Спасибо за ваше невероятное терпение и все советы :) Буду стараться, больше делать и меньше просить готового.

[cssfish]

я рад что вы освоили фидл и будете использовать его впредь. удачи! )

Answer 2

[Stalker_RED]

Можно, у него в документации всё есть же.
api.jqueryui.com/slider/#method-value

Пример: jsfiddle.net/xta14ey4
см. последние три строчки.

Comments

[Zombie42679]

Можно поподробней, я так понимаю, мне надо к value значение добавить, но что дальше ?

[Stalker_RED]

Zombie42679: Дополнил ответ