Highlight endpoints on dimmer slider?

---

Would it be feasible to somehow highlight that the dimmer slider is at 0% and 100%, sometimes I overlook that its at 5% or 95% on my small mobile. Maybe having the slider black at 0%, gray in between and white at 100% or something?

Or maybe add some “dead space” at the far ends so that its easier to hit 0% and 100%

@beikeland

May be something like the following: http://jsfiddle.net/WittigMarcus/zeq92t5a/

I was thinking more an unlinear scale; with sharp edges at 0 and 100. Or 0 and 15.

I played with it a little, if you look at this maybe you undertand what i meant?

http://jsfiddle.net/zy7qkyh4/

But thanks, I didn’t even know where to begin!

@beikeland Thanks for upvoting!

Here is another one using a reduced color space to make the difference between off (0) and on (> 0) more visible.

http://jsfiddle.net/WittigMarcus/muumz331/

EDIT: I didn’t see you proposal before which I like better. It makes sense to have an sharp edge at both ends.

And now I can even play with making the dimmed range logarithmic to match the actual light response. Cool!

Thanks

maybe something like

val = Math.round(v * 80 / 100) + (v > 0 ? 128 : 0) + (v >= 99 ? 47: 0),

My next question is; where do i go looking to put this sample in my running pimatic?

@beikeland I am not a frontend developer so, I only know the “sledgehammer method”. Try to add something similar to the following to the afterRender function, see index-items.coffee#L179. It works for me but has the glitch: initially, the slider has the default background color.

$(elements).find('input').change ->
  v = $(this).val()
  x = 0
  if v > 0
    if v < 100
      x = 128
    else
      x= 192
  val = val = Math.round(v * 64 / 100) + x
  rgb = [val, val, val].join()
  $(this).next().css("background-color", "rgb(" + rgb + ")")
  $(this).next().children("div").css("background-color", "rgb(" + rgb + ")")

I like sledgehammers