Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

beer-handle colors #1

Closed
ibillwilson opened this issue Oct 1, 2018 · 1 comment
Closed

beer-handle colors #1

ibillwilson opened this issue Oct 1, 2018 · 1 comment

Comments

@ibillwilson
Copy link

Hi there... I've been searching for a good responsive and accessible before/after slider for quite a while, and beer slider is the best I've seen! It is so close to being exactly what I want... so of course, I have a couple of feature requests. 😀

Could you provide an option to override the default beer-handle colors when instantiating a new beer slider? The ability to set the initial color, and to set a different color for focus would be ideal.

Also, the ability to change color when hovered would be awesome. This could be the same as the focus color, or a variation of it (perhaps the same shade but lower opacity).

Two reasons for this request:

  1. For some images (winter photos, or any other image with white/light background), the default white gets a bit lost.
  2. Interface consistency... beer slider could be used in applications that require certain colors/transitions for non-focused, focused, and hovered states.

Thank you!
@pehaa
Copy link
Owner

pehaa commented Oct 5, 2018

Hi, thank you very much.
The css styles are rather basic and can be overridden by users.

For example to have a dark ui you can add a custom css like this:

<head>
  ...
  <link rel="stylesheet" href="dist/BeerSlider.css">
  <style>
    .beer-slider[data-beer-label]:after,
    .beer-reveal[data-beer-label]:after {
      background: rgba(0,0,0,.75);
      color: white;
    }
    .beer-handle {
      background: rgba(0,0,0,.5);
      color: white;
    }
    .beer-range:focus ~ .beer-handle {
      background: rgba(0,0,0,.85);
    }
  </style>
</head>

@pehaa pehaa closed this as completed Oct 5, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pehaa @ibillwilson