Input type range does not show range

Navigation
3

I am creating a form whose content consists of having some input of type range. However, the corresponding ranges are not shown and besides that, I would like to know how I can have two sliders instead of one, similar to this one, for example:

This is part of the code I have of the form (and it represents an input range): 

<div class="form-group">
    <label class="control-label col-xs-2">Rango Impuesto Verde:</label>
        <div class="col-xs-10">
            <input id="iv" type="range" name="i_verde" min="0" max="1000000000" class="form-control"/>
        </div>
</div>

I'm using Bootstrap together with the theme Material Design for Bootstrap

Greetings and thanks in advance

    
asked by KPavezC 15.02.2016 в 09:23
source

1 answer

3

Maybe something like this

Slider for Bootstrap

in the Example 2 the slider is implemented as you need it 

$("#ex2").slider({});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.16/bootstrap-slider.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.16/css/bootstrap-slider.css">


 <b>10</b> <input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> <b> 1000</b>

Another alternative could be

noUiSlider

If you analyze the examples, you will see that what you need is implemented

It's just a matter of seeing which one fits your design best

    
answered by 15.02.2016 в 11:36
Do not allow access to defaultUrl in web.config file Start automated test selenium WebDriver Chrome