Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Slider: missing border for native range control #5846

Closed
DzenisevichK opened this Issue · 3 comments

2 participants

@DzenisevichK

Reproduced on:
Chrome 25.0.1364.172 m (Windows 7 SP1 x64)

When shadow and rounding are switched off in theme css it's possible to see that
native input[type="range"] control doesn't have border...

Test page

@jaspermdegroot
Collaborator

@DzenisevichK

This is a deliberate choice. With the slider, the role of the native input is primarily giving feedback. We styled them accordingly.
I understand that when you unset the box-shadow you might want a subtle border and/or background instead (http://jsbin.com/ijuhuy/2/edit). To keep it subtle it has to be adjusted to the background color of the page,so this is something you would have to style in your custom CSS.

Closing as not a bug.

@DzenisevichK

@uGoMobi

Every jqm control by default has border and shadow but why slider input only shadow? Don't agree that this correct...

@jaspermdegroot jaspermdegroot referenced this issue from a commit
@jaspermdegroot jaspermdegroot Slider: border-width 0 instead of border none for the input to make i…
…t easier to restore the border if you want. See #5846
943bf89
@jaspermdegroot jaspermdegroot referenced this issue from a commit
@jaspermdegroot jaspermdegroot Slider: border-width 0 instead of border none for the input to make i…
…t easier to restore the border if you want. See #5846
faecfda
@jaspermdegroot
Collaborator

@DzenisevichK

As I tried to explain in my first comment, we styled them differently because of the different role of the input when the slider handle is there as primary control. Especially on small screens and in case of a dual handle slider we think it's better when the input has a different style. It's not just the border. We also reduced the size, removed the background gradient and made the font bold.

I just made a little change to make it easier to restore the border if you want. You can now set border-width: 1px; for the input to get it back. See http://jsbin.com/ijuhuy/4/edit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.