HTML5 type = range - показ ярлыка

Ответ 1

Я собрал для вас.

// define a lookup for what text should be displayed for each value in your range
var rangeValues =
{
    "1": "You've selected option 1!",
    "2": "...and now option 2!",
    "3": "...stackoverflow rocks for 3!",
    "4": "...and a custom label 4!"
};


$(function () {

    // on page load, set the text of the label based the value of the range
    $('#rangeText').text(rangeValues[$('#rangeInput').val()]);

    // setup an event handler to set the text when the range value is dragged (see event for input) or changed (see event for change)
    $('#rangeInput').on('input change', function () {
        $('#rangeText').text(rangeValues[$(this).val()]);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="rangeInput" name="rangeInput" step="1" min="1" max="4">
<label id="rangeText" />

Ответ 2

Я думаю, что самое простое решение (простой Javascript):

<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>

Этот код не нужен jQuery или CSS и должен работать в любом браузере, поддерживающем тип ввода диапазона.

Ответ 3

Здесь альтернативное решение, не требуемое jQuery. Использует обработчик событий HTML5 oninput и свойство valueAsNumber элемента ввода.

Работает на моей машине: Chrome v54

<form name="myform" oninput="range1value.value = range1.valueAsNumber">
  <input name="range1" type="range" step="1" min="0" max="4" value="1">  
  <output name="range1value" for="range1" >1</output>
</form>

Ответ 4

О. П.,

Я собрал демоверсию, которая использует вход range с соответствующими тегами <p>, которые действуют как обе метки для текущего состояния ползунка, а также триггеры для изменения значения ползунка.

Plunk

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

Разметка 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);
}

Также ничего не стоит, если вам интересно показывать значение current в качестве метки/флага для пользователя (вместо многих) есть отличный статья Криса Койера о пузырях значений для ползунков диапазона.

Ответ 5

Нет собственного способа сделать это. И поскольку вход [type = range] очень плохо поддерживается, я рекомендую использовать слайдер jQuery UI и способ прикрепления меток, найденных здесь в ответ.

Ответ 6

Вы можете использовать jSlider. Его плагин слайдера jQuery для ввода диапазона.

https://github.com/egorkhmelev/jslider

Просто проверьте демо и документацию. Надеюсь, это поможет.

Ответ 7

FWIW стандарт (HTML 5.1, HTML Living Standard) задает атрибут label для option при использовании datalist. Пример кода здесь.

Это еще не реализовано ни одним браузером.