Topic: Making the slider thumb more mobile friendly

matthias_deox pro asked 7 years ago


Hello, I found the mdb slider is very hard to use on mobile devices. Especially with the added "thumb drop" that displays the value. It is very hard to actually touch the thumb to drag it and it happens often that users drag the added "thumb drop" which displays the value but not the actual slider. Would it be possible to make the slider thumb bigger on mobile devices? Kind Regards

Hello again, Sorry for misunderstanding. You can change styles for range input. You can find solution here. You'll also need to use media queries if you want to make thumb bigger only on mobile devices

matthias_deox pro answered 7 years ago


Hello Bartłomiej, I think you misunderstood my question. I was talking about the Range Slider Input element.

Hi, You can make thumbnails bigger on mobile devices by adding some css code. Paste this code to your css file:
@media only screen and (max-width: 600px) {
    .carousel-indicators {
        width:80%;
        left:40%;
        margin-bottom: -80px !important;

    }

    .carousel-thumbnails .carousel-indicators img {
        width: 100px;
        height: 50px;
    }
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags