17
respostas

Silder para alterar o tamanho da fonte em um documento.

Olá, estou tentando criar um documento para o meu trabalho.

Eu preciso criar um Slider para que possa fazer a edição rápida do tamanho da fonte no documento.

Eu estava seguindo esse código que encontrei na internet. Porém, não está funcionando no meu browser.

http://jsfiddle.net/vNfh2/1/

Ficaria muito grato se alguém pudesse me ajudar a resolver essa questão. Abraço!

17 respostas

Voce fez o download do arquivo jquery?

caso nao tenha feito realize o download no site abaixo https://jquery.com/

e coloca a tag antes do final do body

Bruno aproveitando seu exemplo eu rescrevi ele com js puro, pois utilizar jquery para tarefas simples assim acaba não compensando.

Segue link do exemplo: https://jsfiddle.net/mahenrique94/o8esb1xx/

Espero ter ajudado.

Olá Matheus e Lucas!

Muito obrigado, funcionou bem agora! Excelente, fico muito contente com a ajuda de vocês!

Abração!

Olá pessoal,

Só uma dúvida, é possível deixar no texto o tamanho em que o Slider parou? Como no outro exemplo?

Abraço!

Bruno da sim, atualizei o exemplo para fazer a modificação que você pediu:

https://jsfiddle.net/mahenrique94/o8esb1xx/1/

Da um conferida la

Oi Matheus!

Perfeito, era isso aí!

Só uma última dúvida, a formatação do texto se perde depois que eu mudo o slider de posição. As quebras de linha desaparecem, não sei como resolver para que o texto não altere a formatação ao mudar o Slider de posição, isso é possível?

Valeu!!!

Não entendi o problema Bruno, consegue explicar melhor ?

Claro,

Quando eu diagramei o texto no Sublime Text, eu tive que fazer algumas quebras de linha usando a tag .

Mas quando eu gero o código e uso o Slider, o texto fica tudo em uma linha, e essas quebras são importantes.

<!DOCTYPE html>

Aumentando o font-size com Range - 12px

abdgopqþæœđøąð eæœę f∫fiflſƒ
ijį kĸ ftfiflŧ hmnuŋħųπ sß vwxy jltȷflμπł ĄĘĮŲąęįų AÆĄΔ∆ BPRÞẞ CG HNUŊĦŲ NANEF JŊ KX LTŦŁ DOQŒÐØΩ VWXY Z∑ ?¿!¡©®™ The quick brown fox jumps over the lazy dog. HOVefghjoprv05₀₅éë $¢£¥€₺ ^38^0123456789 0$0¢0£0¥0€0₺0 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ^+−±=≠÷≤≥<>~≈×-–— (math signs) 0^0+0−0±0=0≠0÷0≤0≥0~0≈0×0-0–0—0 ģșşąáàâãāäăåč ȘŞĄÁÀÂÃĀÄĂÅČ (accents lc) HH-H–H—H -–— ľudovít štúr ĽUDOVÍT ŠTÚR æðsta øðrum ofboðið größter GRÖẞTER włączając WŁĄCZAJĄC info@daltonmaag.com ½⅓⅔¼¾⅕⅖⅗⅘⅚⅐⅛⅜⅝⅞⅑½⅓⅔¼¾⅕⅖⅗⅘

Putz, tentei copiar o código aqui mas não deu!

Quando eu diagramei o texto no Sublime Text, eu tive que fazer algumas quebras de linha usando a tag < br >.

Mas quando eu gero o código e uso o Slider, o texto fica tudo em uma linha, e essas quebras são importantes.

Ok, para ficar mais fácil me informa como o texto deve ficar e como esta ficando, exemplo:

Deve ficar assim:

Matheus
Henrique

Mas esta ficando:

Matheus Henrique

Porque dai eu vou ver o que esta acontecendo e ja consigo lhe ajudar, pois ainda não entendi essa quebra de linha.

Isso, exatamente!

Bruno fiz uma nova atualização no script:

https://jsfiddle.net/mahenrique94/o8esb1xx/2/

Eu estava pegando o texto que havia dentro da div textContent porém como você informa a tag ele ignora a mesma, então passei a utilizar innerHTML onde irá copiar a tag também.

Da uma conferida e veja se era isso mesmo que precisava.

Caramba, Matheus! Você é um mestre.

Obrigado demais! Abraço!

Estou longe disso kkkk

De nada, não deixe de marcar sua dúvida como solucionada para que outros alunos possam utiliza-la como solução.

Precisando não deixe de criar suas dúvidas.

Abraçooos

Oi Matheus!

Uma dúvida que pintou aqui. Estava querendo criar um menu fixo para visualizar o tamanho em que a fonte se encontra em tamanhos maiores, ou seja, ao fazer scroll down, que o menu do slider e do tamanho da fonte em pixels aparecesse sempre.

Quando crio uma nova 'div' para criar um menu dessa forma, a div que abaixo tem o texto não é mais afetada pelo slider. O que pode ser o problema? Talvez o script em JavaScript está apontando apenas para a primeira div que encontra?

Obrigado pela ajuda! Abraço!

Bruno manda seu código para eu ver o que você esta fazendo e entender melhor, pelo que eu entendi você quer deixar o slide dentro de um menu fixo e ao rolar a página sempre exibir esse menu, certo ?

Esse menu teria apenas o slide ou teria o slide com o tamanho das fontes atuais ?

De qualquer maneira vendo seu código ja irei entender e posso lhe ajudar.