tyleryasaka/semantic-ui-range

Changing the size of the thumb

nilsi opened this issue · 1 comments

nilsi commented

Hi, I have a question regarding changing the size of the thumb. I wanted to change it from 20px to 30px.

So I simply changed it like this:

.ui.range .inner .thumb {
    height: 30px;
    width: 30px;
}

However when I do this the offset is not working properly anymore. If I try dragging the range in the start left most position it does not pick up the drag. Since the thumb is actually outside the inner div I think. I played around with the offset parameter in range.js but couldn't get it to work well.

I was thinking maybe you know how to change this easily. Thank you.

You can see the issue I'm having here:
http://codepen.io/anon/pen/adRVqx

If you drag in the most left part of the thumb.

@nilsi thanks, you found a bug in the code. I fixed it and your codepen seems to work now.