Criar um slider com estilo diferente

[lucastonussi]

• [x] Adicionar na página que você está construindo um ou mais sliders

👉 https://www.cssportal.com/style-input-range/

[lucastonussi]

Mais exemplos:

• [x] https://vuetifyjs.com/en/components/sliders/

[marinamq]

Para criar o slider, eu vou ter que modificar qual arquivo?

[lucastonussi]

dentro do marina.vue

[lucastonussi]

Uma dica:

https://www.w3schools.com/howto/howto_js_rangeslider.asp

[lucastonussi]

Dentro do

Você pode colocar isso

<input class="slider" type="range" min="1" max="100" value="50">

Ele vai criar um slider range pra vc.

Para estilizar o slide ranger, colocar isso dentro do :

.slider {
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
}

[marinamq]

aberto PR.

[lucastonussi]

https://github.com/lucastonussi/site/pull/15/files

[lucastonussi]

lembre de empurrar as mudanças das correções

[lucastonussi]

Aprovado pode mergiar https://github.com/lucastonussi/site/pull/15

E fica acompanhando o deploy https://github.com/lucastonussi/site/actions

[marinamq]

Feito. Site atualizado.