Pagina inicial » Web design » Suporte Multirange Polyfill para Sliders HTML5 de Alça Dupla

    Suporte Multirange Polyfill para Sliders HTML5 de Alça Dupla

    o novas entradas do intervalo HTML5 são fantásticos para quantidades e seleções dinâmicas como datas. Mas o controle deslizante de intervalo padrão não suporta várias alças.

    Entrar Multirange, uma polyfill criado para suportar várias alças que funcionam corretamente e suportam todos os principais navegadores.

    Isto é um ferramenta gratuita e fornece a melhor maneira de adicione várias alças nativamente, sem usar um plugin. Este polyfill tem dois recursos: uma Arquivo JS e um Arquivo CSS. Eles ambos trabalham em entradas de intervalo e você pode baixar os dois do repo principal do GitHub.

    Note que isso significa que você precisa trabalhar com navegadores que já suporta a entrada de intervalo por padrão. Isso também requer variáveis ​​CSS que não são suportados em todos os navegadores.

    Felizmente, Multirange usa um fallback de CSS onde dois controles deslizantes de intervalo são usados ​​em vez de um. Esta não é uma solução perfeita, mas ainda oferece uma interface utilizável. No lado positivo, isso funciona imediatamente fora da caixa sem amarras.

    Somente adicione os arquivos ao seu site e você será capaz de use o múltiplo atributo nos seus campos de controle deslizante. Você também pode definir intervalos para valores de entrada com uma vírgula.

    Aqui está um breve trecho de código HTML usando o controle deslizante Multirange:

      

    As alças podem ser arrastados um pelo outro e até mesmo deixado em cima um do outro. E o intervalo de entrada ainda suporta navegação por teclado o que é ótimo para acessibilidade.

    Todos demos e amostras de código fonte pode ser encontrado na página web da Multirange, então verifique se você está sempre procurando controle deslizante HTML de vários intervalos.