Whoops…Nothing found

Try other keywords in your search

Customizing the Fader via CSS

 0 Minutes

 0 Likes

 260 Views

.slider{
 background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/test.svg.png");
 .knob {
  border-radius: 100%;
  background-color: yellow;
  div { display: none; }
 }
 .before{
  background-color: blue;
 }
background-color: red;
}

Complete Fader SCSS example

.slider {
    background: linear-gradient(red, red, yellow, green);
     .before{
    padding: 0px;
         div{
            background-color: red;
            opacity: 0.5;
        }
    }
     .knob{
        align-items: center;
        justify-content: center;
        background-color: gray;
         div{
            border-radius: 100%;
            width: 20px;
            height: 20px;
            flex-grow: 0;
            background-color: green;
            z-index: 1;
            
        }
    }
     .after{
        background-color: black;
    padding: 0px;
         div{
            background-color: blue;
            opacity: 0.5
        }
    }
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
 .button{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: pink;
}


Was this article helpful?