을 구축하려면 어떻게 해야 하는 정상적으로 저하 HTML5 범위입니까?

Question

내가 사용하고 싶 <input type='range' /> HTML5 에서 브라우저에 대한 그것을 지원하는 저하를 <select /> 는 경우에 없습니다.내가 사용하여 루비에 레일이,그래서 실패하는 모든 사람이,내가 할 수있는 뭔가 이 서버에 있습니다.

나는 것을 선호하지만,항목을 포함하고 있는 인라인의 아이디어로 진보적인 향상을 통해 수행 Javascript.보너스 포인트의 경우 JQuery.

Answer 1

체크 아웃 Modernizr, 범위가 지원되는지 알려줍니다. 기술은 범위 입력을 생성하고 유형을 확인하는 것이라고 생각합니다. 여전히 "범위"인 경우 지원됩니다. 그렇지 않으면 다른 브라우저의 폴백 인 "텍스트"를보고해야합니다.

Answer 2

첫번째 검색 브라우저에서 처리할 수 있는 HTML5 다음이 같은 것을 사용:

   $('input').each(function (i, item) {
        if ($(item).attr('min') !== undefined && $(item).attr('max') !== undefined) {
            var select = document.createElement("SELECT");
            $(select).attr('name', $(item).attr('name'));
            $(select).attr('id', $(item).attr('id'));
            $(select).attr('disabled', $(item).attr('disabled'));
            var step = 1;
            if ($(item).attr('step') !== undefined) {
                step = parseFloat($(item).attr('step'));
            }

            var min = parseFloat($(item).attr('min'));
            var max = parseFloat($(item).attr('max'));
            var selectedValue = $(item).attr('value');
            for (var x = min; x <= max; x = x + step) {
                var option = document.createElement("OPTION");
                $(option).text(x).val(x);
                if (x == selectedValue) { $(option).attr('selected', 'selected'); }
                $(select).append(option);
            };
            $(item).after(select);
            $(item).remove();
        }
    });

때문에 사용할 수 없습니다 input[type=range] 선택했으로 이동 $(item).attr('min') && $(item).attr('min') 접근,이것을 조금 이상이 있는 경우 다른 형태의 입력 컨트롤러 두 가지 특성이 있습니다.