5

Estoy creando un formulario cuyo contenido consiste en tener algunos input de tipo range. Sin embargo, no se muestran los rangos correspondientes y además de eso, quisiera saber cómo puedo contar con dos sliders en vez de uno, parecido a éste por ejemplo:

input range

Este es parte del código que tengo del formulario (y que representa un 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>

Estoy utilizando Bootstrap junto con el tema Material Design for Bootstrap

Saludos y gracias de antemano

1 respuesta 1

3

Quizas algo como esto

Slider for Bootstrap

en el Example 2 se implementa el slider tal cual lo necesitas

$("#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>


Otra alternativa podria ser

noUiSlider

si analiza los ejemplos, veras que se implementan lo que necesitas

Solo es cuestion de ver cual se adapta mejor a tu diseño

4
  • 4
    Aunque tu respuesta ayuda, seria mejor que coloques el código acá.
    – Wilfredo
    Commented el 15 feb. 2016 a las 11:35
  • @WilfredoP pero que codigo voy a poner si solo estoy recomendando librerias que puede usar para implementar el slide (con las caracteristicas que describe), el codigo saldra de la evaluacion de los diferentes ejemplos y ver cual se adapta al diseño del sitio, no hay un unico ejemplo en codigo Commented el 15 feb. 2016 a las 11:40
  • @AlvaroMontoro pero se tratan de librerias de terceros (que implementan el slider), aunque ponga ejemplos de como usarlas esto queda atado a que las librerias esten vigentes. O se debe poner el codigo de toda la libreria completa ? Ademas no se cual va a utilizar, ya que propongo dos que se aproximan a la apariencia del control que busca Commented el 15 feb. 2016 a las 14:22
  • Ahora ya esta mucho mejor ;)
    – jasilva
    Commented el 15 feb. 2016 a las 15:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.