V
V
viktorulyushev2017-05-24 09:02:30
JavaScript
viktorulyushev, 2017-05-24 09:02:30

How to convert range to select?

There is a filter with a price, it has 2 inputs, where a range is entered from the minimum value to the maximum, how to remake it so that the place of the inputs is select? so that values ​​\u200b\u200bare entered there from the minimum to the maximum
912a670daa1c4b4b803ffd96f712f37f.PNG
Here is the layout

<div class="ngrs-range-slider">
    <div class="ngrs-inputs">
        <div class="row between-xs middle-xs">
            <div class="col-xs-4">
                <input class="input-small" name="filteredModelMin" type="number" data-ng-model="modelMin" data-ng-keyup="inputChange($event)" data-ng-blur="blurMin()" />
            </div>
            <div class="col-xs-4">
                <div class="ngrs-runner-dash">-</div>
            </div>
            <div class="col-xs-4">
                <input class="input-small" name="filteredModelMax" type="number" data-ng-model="modelMax" data-ng-keyup="inputChange($event)"  data-ng-blur="blurMax()"/>
            </div>
        </div>
    </div>
    <div class="ngrs-runner">
        <div class="ngrs-handle ngrs-handle-min"><i></i></div>
        <div class="ngrs-handle ngrs-handle-max"><i></i></div>
        <div class="ngrs-join cs-bg-10"></div>
    </div>
    <div class="ngrs-value-runner" ng-show="showValues">
        <div class="row between-xs">
            <div>
                <div class="ngrs-value ngrs-value-min"><div data-ng-bind="::min"></div></div>
            </div>
            <div>
                <div class="ngrs-value ngrs-value-max"><div data-ng-bind="::max"></div></div>
            </div>
        </div>
    </div>
</div>

If now you just change input to select, then the site will display like this (this is for the first input)
<select class="input-small ng-pristine ng-valid ng-not-empty ng-touched" name="filteredModelMin" type="number" data-ng-model="modelMin" data-ng-keyup="inputChange($event)" data-ng-blur="blurMin()"><option value="? number:1000 ?"></option>
</select>

It is necessary, as I understand it, to do something with date attributes?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
Kostya Gorozhanov, 2017-05-24
@viktorulyushev

plnkr.co/edit/Jf6DyvUJtaEA4Q1hci1c?p=preview something like this?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question