Range Slider and touch screens

[J94Participant]

When using the range slider on a touch screen, the value sits – unreadable – under the finger. Could we move the value up over the slider, so one can see the value as one slides the handle back and forth?

[Ernest MarcinkoKeymaster]

Hi,

Sure, with a bit of custom CSS it is possible:

fieldset.asp_custom_f {
    display: flex;
    flex-direction: column;
}

.asp_noui_lu {
    order: 0;
}

fieldset .noUi-target.noUi-ltr.noUi-horizontal {
    order: 1;
}

..and if you only want to target mobile screen width, then use this:

@media only screen and (max-width: 480px) {
    fieldset.asp_custom_f {
        display: flex;
        flex-direction: column;
    }

    .asp_noui_lu {
        order: 0;
    }

    fieldset .noUi-target.noUi-ltr.noUi-horizontal {
        order: 1;
    }
}

Apply this code to your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[J94Participant]

Great thanks. This makes a lot more sense from a touch screen UI perspective. You should make it an option in settings/filter panel (perhaps something like: Touch Screen Optimized: Yes/No).

[Ernest MarcinkoKeymaster]

Thank you, I will definitely consider this, it would be a great addition.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts