Я хочу обновить свой ползунок диапазона до 10% при нажатии в любом месте на нем. Является ли это возможным?

Question

Я хочу обновить свой ползунок диапазона до 10% при нажатии в любом месте на нем. Является ли это возможным?

0

У меня есть ползунок диапазона, и я хочу обновить его всего на 10% при нажатии на него. Прямо сейчас, если я нажимаю на конец ползунка диапазона, он принимает 100% своего значения.

Есть ли возможность сделать это? Я пробовал это:

Разметка:

<input id="slider" type="range" min="0" max="50" value="24.5" step="1" />

JavaScript:

var output = document.getElementById('range');
output.innerHTML = $('#slider').val();

function showValue(newValue) {
    output.innerHTML = newValue;
}

$('#slider').change(function(e) {
    showValue($(this).val());

});

Пожалуйста, обратитесь к этой скрипке

Gajen 05 май 2014, в 15:07

Источник

1

Отмечу, что вы отметили свой вопрос как JQuery, так и AngularJS. В идеале вы не должны использовать оба в одном и том же проекте, если нет веских причин для этого. AngularJS должен позаботиться обо всех необходимых вам манипуляциях с DOM.
Holf 05 май 2014, в 13:00
1

Покажите нам некоторый код, как в вашем вопросе, так и, возможно, с использованием jsfiddle.net .
Holf 05 май 2014, в 13:01
0

Скажите, пожалуйста, что за «бегунок диапазона» вы используете (например, со ссылкой)
blint 05 май 2014, в 13:01
0

Извините за это, но я хочу, чтобы это было сделано на любой из этих платформ.
Gajen 05 май 2014, в 13:03
0

вот этот код jsfiddle.net/jaredwilli/6HdvB
Gajen 05 май 2014, в 13:08
0

Вы хотите обновить на 10%, но это должно быть добавлено или вычтено соответственно вашему клику, верно? или вы просто хотите добавить только
Jay Shukla 05 май 2014, в 13:19

Показать ещё 4 комментария

Теги:

jquery

html

html5

3 ответа

0

Я не знаю, понял ли я ваш вопрос, может быть, это то, что вы хотите?

$('#slider').click(function(e) {
    $('#slider').val(10);
    showValue(10);
});

Daniel Hernández Alcojor 05 май 2014, в 10:45

0

Проверьте Скрипт ниже, надейтесь, что это может быть необходимым.

Демо-скрипт

 $(function() {
 $( "#slider-range-max" ).slider({
 range: "max",
 min: 0,
 max: 100,
 step: 10,
 value:10,
 slide: function( event, ui ) {
  $( "#count" ).val( ui.value );
 }
});
  $( "#count" ).val( $( "#slider-range-max" ).slider( "value" ) );
});

<p>
 <label for="count">Steps Count : </label>
 <input type="text" id="count" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>

Приветствия :)

Subh 05 май 2014, в 10:37

Ещё вопросы

Отмечу, что вы отметили свой вопрос как JQuery, так и AngularJS. В идеале вы не должны использовать оба в одном и том же проекте, если нет веских причин для этого. AngularJS должен позаботиться обо всех необходимых вам манипуляциях с DOM.
Покажите нам некоторый код, как в вашем вопросе, так и, возможно, с использованием jsfiddle.net .
Скажите, пожалуйста, что за «бегунок диапазона» вы используете (например, со ссылкой)
Извините за это, но я хочу, чтобы это было сделано на любой из этих платформ.
Вы хотите обновить на 10%, но это должно быть добавлено или вычтено соответственно вашему клику, верно? или вы просто хотите добавить только

Devima · Accepted Answer · 2014-05-05T12-31-00.000Z

Я не знаю, правильно ли я правильно понял ваш вопрос, но если вы хотите щелкнуть по тегу ползунка, это увеличено o уменьшено на 10 (зависит от того, что вы нажмете левой кнопкой справа от курсора)
Проверьте этот скрипт
Весь код jQuery вам нужен:

<script type="text/javascript">
$(document).ready(function(){
    $( ".no" ).on('mousedown',function(){return false;});   
    $('#slider').click(function(e){
        var x = e.pageX - this.offsetLeft;
        var val=parseInt($('#slider').val())
        x>val?valx=val+=10:valx=val-=10
        $('#slider').val(valx)
        $('#range').text(valx)
        })

})
</script>

Я не знаю, почему этот код не работает, показывая страницу скрипта в IE11, но я тестирую этот код онлайн на своем сайте и работаю также с IE11
Если это решение удовлетворит ваши потребности, чтобы проголосовать;)
благодаря

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