Search code examples
csshtmlrangematerialize

Change Range Icon with Img Materialize CSS

can i change icon Range Slider from Materialize ?

enter image description here

Thanks

Solution

  • If you dig deeper into the materialize.css file then you'll find this, on editing few things from this you can customize the slider-thumb.

    Check W3Schools docs on Range sliders, you can customize by changing values like - border, height, width, border-radius and many more. Don't forget to override these with the help of !important.

    input[type=range]::-webkit-slider-thumb {
        border: 1px solid #000;
        height: 20px;
        width: 20px;
        border-radius: 25% !important;
        background: #4826a6 !important;
        -webkit-transition: -webkit-box-shadow .3s;
        transition: -webkit-box-shadow .3s;
        transition: box-shadow .3s;
        transition: box-shadow .3s, -webkit-box-shadow .3s;
        -webkit-appearance: none;
        background-color: #26a69a;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        margin: -10px 0 0 0;
    }

    Customized Range Slider

    Range - Slider

    How to create Range Sliders - W3Schools