1

Quero modificar o indicador de valor de um campo <input type="range"/>. Quero mudar formato e cor desse indicador, como apresentado nas imagens a seguir.

Campo atual

Este é o campo que eu quero modificar. O indicador possui esse formato de "caixa, e eu quero modificar para um formato de "bola", "círculo", etc., como nos exemplos abaixo:

Campo modelo (1) Campo modelo(2)

HTML: <p> <input type="range" id="campo" value="25" disabled/> </p>

CSS:

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 18em;
    height: 0.5em;
    position: relative;
    left: 4em;
    border-radius: 5px;
    background-color: #3071a9;
    outline: none;
}

input[type=range]::-webkit-slider-thumb{
    border-radius: 50%;
}



#campo::-webkit-slider-thumb{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: blue;
}

Desde já agradeço.

2 Respostas 2

4

Cara para o estilo "pegar" primeiro vc tem que remover o estilo original, para isso vc pode usar um all:unset e depois um -webkit-appearance: none; e depois coloca seus estilos. Para funcionar no FireFox precisa do vendo prefix -moz-range-thumb e nos browsers da MS -ms-

inserir a descrição da imagem aqui

Veja

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 18em;
    height: 0.5em;
    position: relative;
    left: 4em;
    border-radius: 5px;
    background-color: #3071a9;
    outline: none;
}

/* para o Fire Fox */
#campo::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: blue;
  border: none;
}

/* para browsers da MS */
#campo::-ms-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: blue;
  border: none;
}

#campo::-webkit-slider-thumb{

  all:unset; /* limpa os estilos iniciais */
  -webkit-appearance: none; /* remove a aparencia padão */
  border: none;
  
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: blue;
}
<p><input type="range" id="campo" value="25" disabled/> </p>

5
  • Cara, deu mais do que certo, obrigado. Se não se importa, mais uma 'pequena' pergunta... Vi que você tem 'ouro' em CSS no Stack Overflow. Como você aprendeu? Me recomenda algum curso, livro ou algo do tipo pra melhorar? Obrigado, e desculpe o incômodo. Commented 15/03/2019 às 20:25
  • 2
    @ArthurSiqueira Cara na verdade onde eu mais aprendo CSS é na documentação da Mozilla, lá é tipo a Wikipedia do CSS, vc entra em uma propriedade, e tem link para outra propriedade e por ai vc vai clicando em tudo que não conhece e vai lendo e principalmente testando ai localmente para ver como funciona etc. Outra opção é procurar por tutoriais básico no Youtube mesmo, lá tb tem coisas boas, e vai vendo e tentando replicar os exemplos. )
    – hugocsl
    Commented 16/03/2019 às 0:12
  • 1
    Isso já vai te ajudar bastantes, mas o principal e testar e replicar na mão o conteúdo que vc vai ver. Isso ajuda muito a entender o CSS e ver como ele funciona na prática. 80% do CSS vc praticamente não vai usar, mas os outro 20% vc vai usar 80% do tempo! Regra 80/20 :), então estude pastante a base, box model, position, flex, display, etc
    – hugocsl
    Commented 16/03/2019 às 0:13
  • Valeu, hugão, ajudou eu também! Commented 27/07/2019 às 2:36
  • @LeandroNascimento fala Leandro, que bom que te ajudou ai, se vc esta pesquisando isso essa outra questão tbm pode ter algo que te interesse pt.stackoverflow.com/questions/265316/… abs
    – hugocsl
    Commented 27/07/2019 às 12:12
2

Você deve usar o pseudo seletor ::-webkit-slider-runnable-track para estilizar o trilho do campo e o pseudo seletor ::-webkit-slider-thumb para estilizar o "seletor" do campo:

input[type='range'] {
  cursor: pointer;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

/** 
 * Use o pseudo-seletor "::-webkit-slider-runnable-track" para customizar o "trilho" do campo.
 */
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: #1a86c8;
}

/** 
 * Use o pseudo-seletor "::-webkit-slider-thumb" para customizar o "seletor" do campo.
 */
input[type='range']::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -4.5px;
  background-color: blue;
  border-radius: 60px;
}
<input type="range" min="0" max="100" />

Para saber mais, consulte:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .