Бегунок с двумя значениями, дублируемыми из инпутов и лимитированной прокруткой 50% от края

@Mailo · Регистрация: 18.02.2010

Author24 — интернет-сервис помощи студентам

Подскажите пожалуйста, как мне реализовать бегунок на картинке ниже?

У меня есть только вариант с двумя инпутами

т.е. получается надо добавить, дублируемые с инпутов, значения на концы бегунка и как то ограничить оба бегунка что бы они не убегали далее чем на 50% от концов полосы. Ну а цифра на бегунке по середине это просто span без функционала.

@Уф · 09.04.2017, 21:49

просто свяжи импуты со слайдером
http://jsfiddle.net/cH9ve/190/

HTML5

<table>
<tr><td> от <input id="slider-value1" size="10"></td><td> до <input id="slider-value2" size="10"></td></tr>
<tr><td colspan="2"><div id="slider"></div></td></tr>
</table>

Javascript

var min_price = 100, max_price = 5000;
$("#slider").slider(
{
            values:[min_price,max_price],
            min: min_price,
            max: max_price,
            step: 50,
            range: true,
            slide: function( event, ui ) {
                $( "#slider-value1" ).val( ui.values[0] );
                $( "#slider-value2" ).val( ui.values[1] );
            }
}
);
 
var values = $( "#slider" ).slider( "option", "values" );
$( "#slider-value1" ).val( values[0] );
$( "#slider-value2" ).val( values[1] );
 
$('#slider-value1, #slider-value2').keyup(function(){
    $( "#slider" ).slider( "option", "values", [ $('#slider-value1').val() || min_price , $('#slider-value2').val() || max_price ] );
})

Добавлено через 10 минут
квадратики поместить вниз ползунка можно так

CSS

1
2
3

.ui-slider-handle{
  margin-top: 20px;
}

как сделать стрелки из них сам думай

@Mailo · 09.04.2017, 22:03 **[ТС]**

А как вышеописанное решает мою задачу?)

@Уф · 11.04.2017, 21:27

http://jsfiddle.net/cH9ve/191/ я ж те показал, вот ползунки заходят на 50% от края, просто надо их сместить

@Mailo 228 / 208 / 27 Регистрация: 18.02.2010 Сообщений: 2,043
		1
	Бегунок с двумя значениями, дублируемыми из инпутов и лимитированной прокруткой 50% от края 09.04.2017, 19:28. Показов 1597. Ответов 3 Метки нет (Все метки) Подскажите пожалуйста, как мне реализовать бегунок на картинке ниже? У меня есть только вариант с двумя инпутами т.е. получается надо добавить, дублируемые с инпутов, значения на концы бегунка и как то ограничить оба бегунка что бы они не убегали далее чем на 50% от концов полосы. Ну а цифра на бегунке по середине это просто span без функционала. Миниатюры 0

@Mailo 228 / 208 / 27 Регистрация: 18.02.2010 Сообщений: 2,043
	09.04.2017, 22:03 [ТС]	3
	А как вышеописанное решает мою задачу?) 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	11.04.2017, 21:27	4
	http://jsfiddle.net/cH9ve/191/ я ж те показал, вот ползунки заходят на 50% от края, просто надо их сместить 0