Hay una manera que puede también establecer algunas texto de etiqueta para cada uno de los pasos en el HTML5 tipo=rango de control. Básicamente tengo un control de rango <input type="range" step=1 min=0 max=4> y para cada uno de los pasos yo quiero algo de la etiqueta que se mostrará en el control. Es allí una manera de hacer esto?

Esto depende del explorador, y depende de cómo el navegador implementa
Hay etiquetas específicas para agregar etiquetas para cada uno de los pasos? ¿Cuáles son el navegador es compatible?
Algo más de información sobre el estado actual de la gama tipo: wufoo.com/html5/types/8-range.html

OriginalEl autor Sampat | 2013-03-04

5 Comentarios

  1. 16

    Supongo que la solución más sencilla (simple Javascript) es:

    <fieldset>
        <label for="rangeVal">resolution (dpi):</label>
        <input type ="range" max="1000" min="20"
            oninput="document.getElementById('rangeValLabel').innerHTML = this.value;"
            step="1" name="rangeVal" id="rangeVal" value="200">
        </input>
        <em id="rangeValLabel" style="font-style: normal;"></em>
    </fieldset>

    Este código no necesita jQuery ni el CSS y debería funcionar en cualquier navegador compatible con el rango de tipo de entrada.

    Si quieres que cambie automáticamente a medida que se deslice la barra, usted debe utilizar oninput en lugar de onchange. Consulte stackoverflow.com/a/19067260/724568

    OriginalEl autor mischka

  2. 1

    OP,

    Puse una demostración en la que se utiliza un range de entrada con su correspondiente <p> etiquetas que actúan tanto como etiquetas para el estado actual del control deslizante, así como disparadores para cambiar el regulador del valor.

    Plunk

    http://plnkr.co/edit/ArOkBVvUVUvtng1oktZG?p=preview.


    El lenguaje de Marcado HTML

    <div class="rangeWrapper">
        <input id="slide" type="range" min="1" max="4" step="1" value="1"  /> 
        <p class="rangeLabel selected">Label A</p>
        <p class="rangeLabel">Label B</p>
        <p class="rangeLabel">Label C</p>
        <p class="rangeLabel">Label D</p>
    </div>

    Javascript

    $(document).ready(function(){
    
      $("input[type='range']").change(function() {
        slider = $(this);
        value = (slider.val() -1);
    
        $('p.rangeLabel').removeClass('selected');
        $('p.rangeLabel:eq(' + value + ')').addClass('selected');
    
      });
    
      $('p.rangeLabel').bind('click', function(){
        label = $(this);
        value = label.index();
        $("input[type='range']").attr('value', value)
                                .trigger('change');
      });
    
    });

    CSS

    input[type="range"] {
        width: 100%;
    }
    
    p.rangeLabel {
        font-family: "Arial", sans-serif;
        padding: 5px;
        margin: 5px 0;
        background: rgb(136,136,136);
        font-size: 15px;
        line-height 20px;
    }
    
    p.rangeLabel:hover {
        background-color: rgb(3, 82, 3);
        color: #fff;
        cursor: pointer;
    }
    
    p.rangeLabel.selected {
        background-color: rgb(8, 173, 8);
        color: rgb(255,255,255);
    }

    También vale la pena nada, si usted está interesado en mostrar el actual valor como etiqueta/bandera para el usuario, (en lugar de los muchos) que hay un gran artículo de Chris Coyier en valor de burbujas para la gama de reguladores.

    OriginalEl autor couzzi

  3. 0

    No es nativo manera de hacerlo. Y como input[type=rango] es muy poco compatibles, voy a recomendar el uso de jQuery UI slider y el modo de fijación de las etiquetas que se encuentran aquí en respuesta.

    OriginalEl autor Arman P.

Dejar respuesta

Please enter your comment!
Please enter your name here