Вопросы Теги

Как сделать диапазон ввода с двумя значениями, от и до [дублировать]

Мое обходное решение (JavaScript) 

    var s1 = " SELECT "

 + "FROM   table t "

 + "  where t.field in ";

  var s3 = '(';

  for(var i =0;i<searchTerms.length;i++)
  {
    if(i+1 == searchTerms.length)
    {
     s3  = s3+'?)';
    }
    else
    {
        s3  = s3+'?, ' ;
    }
   }
    var query = s1+s3;

    var pstmt = connection.prepareStatement(query);

     for(var i =0;i<searchTerms.length;i++)
    {
        pstmt.setString(i+1, searchTerms[i]);
    }

SearchTerms - это массив, который содержит ваши входные / ключи / поля и т. д.

1
задан lyra 30 October 2015 в 08:04
поделиться

1 ответ

Вы можете сами создать виджет.

Широкая идея:

  • Markup и Javscript: иметь два входа диапазона внутри контейнера для виджета. Использовать атрибуты данных в контейнере для хранения двух значений, например. data-lbound для сохранения более низкого значения и data-ubound для хранения более высокого значения. Обновите атрибуты данных контейнера в событии input входов диапазона. Используйте эти атрибуты данных для извлечения значений в любое время, необходимое для отправки формы или любого другого use
  • CSS: Используйте абсолютное позиционирование для позиционирования двух диапазонных входов друг над другом внутри контейнера. Стилизация входов диапазона, чтобы их большие пальцы перемещались немного выше, так что перекрываемый диапазон входы не мешают их использованию. При необходимости скройте ползунок / бар / дорожку. Создайте псевдоэлемент ::after в контейнере со свойством content, установленным для атрибутов данных контейнера. Это будет использоваться для отображения текущих диапазонов. Отдых - это все, что нужно для украшения вкладов диапазонов.

Вот небольшая демонстрация, которую я создал. ( Проверьте его с помощью Chrome или Firefox ). Работает и с клавиатурой.

Fiddle: http://jsfiddle.net/abhitalks/a1f1k8d0/2/

Фрагмент: 

.multi-range, .multi-range * { box-sizing: border-box; padding: 0; margin: 0; }
.multi-range { 
    position: relative; width: 160px; height: 28px; margin: 16px;
    border: 1px solid #ddd; font-family: monospace;
}
.multi-range > hr { position: absolute; width: 100%; top: 50%; }
.multi-range > input[type=range] {
    width: calc(100% - 16px); 
    position: absolute; bottom: 6px; left: 0;
}
.multi-range > input[type=range]:last-of-type { margin-left: 16px; }
.multi-range > input[type=range]::-webkit-slider-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-moz-range-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-moz-range-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-ms-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-ms-track { -webkit-appearance: none; height: 0px; }
.multi-range::after { 
    content: attr(data-lbound) ' - ' attr(data-ubound); 
    position: absolute; top: 0; left: 100%; white-space: nowrap;
    display: block; padding: 0px 4px; margin: -1px 2px;
    height: 26px; width: auto; border: 1px solid #ddd; 
    font-size: 13px; line-height: 26px;
}
<div class='multi-range' data-lbound='10' data-ubound='50'>
    <hr />
    <input type='range' 
           min='10' max='45' step='5' value='10' 
           oninput='this.parentNode.dataset.lbound=this.value;'
    />
    <input type='range' 
           min='15' max='50' step='5' value='50' 
           oninput='this.parentNode.dataset.ubound=this.value;'
    />
</div>

Примечание: Вышеприведенная демо - это просто демо. Он отлично работает в Chrome и Firefox, но я не смог проверить его в IE / Edge. Я чувствую, что у него будут проблемы с IE / Edge, потому что слайдерные слайды встроены в трек в этих браузерах. Вы можете дополнительно настроить и стилизовать его для работы с IE / Edge.

3
ответ дан Abhitalks 17 August 2018 в 08:42
поделиться
Другие вопросы по тегам:

Похожие вопросы: