how to style input range thumb slider

Runtime Terror answered on April 3, 2021 Popularity 10/10 Helpfulness 2/10

answer how to style input range thumb slider

related style input range

how to style input range thumb slider

Comment

appearance: none;
-webkit-appearance: none;

// to hide default and apply new styles

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: input range slider thumb whatever

Link to this answer
Share Copy Link

Contributed on Apr 03 2021

Runtime Terror

0 Answers Avg Quality 2/10

Closely Related Answers

style input range

Comment

-1

input[type="range"] {
  -webkit-appearance: none;
  margin-right: 15px;
  width: 200px;
  height: 7px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  background-image: linear-gradient(#ff4500, #ff4500);
  background-size: 70% 100%;
  background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ff4500;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}

input[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

Popularity 10/10 Helpfulness 6/10 Language whatever

Source: nikitahl.com

Tags: input inpu

Link to this answer
Share Copy Link

Contributed on Aug 30 2022

SABIR LKHALOUFI

0 Answers Avg Quality 2/10

how to style input range thumb slider

Contents

More Related Answers

how to style input range thumb slider

Closely Related Answers

style input range

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.