Making the slider thumb more mobile friendly

Topic: Making the slider thumb more mobile friendly

matthias_deox pro asked 6 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

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

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

Add comment

matthias_deox pro answered 6 years ago

0 0 Best answer

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

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

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;
    }
}

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

matthias_deox

Pro User 14Support score
9Questions 5Answers 0Snippets