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.