Dragging the range in a range slider

[asher]

I have a two-handle range slider, and I need to be able to grab the
range bar and drag both handles simultaneously. I know that there was
a mention of supporting this for 1.7 - has any work been done? Anybody
have any pointers on how to go about implementing it?

Thanks,
Aaron

[Richard D. Worth]

This was considered during 1.7, but didn't make it. It could be done in 1.8. A couple things off the top of my head that need to be worked out:

- will the existing class on the range element work with hover, focus, and active?
- should dragging the range be an option, or the only behavior? If it's option, what should be the default?

As we make some progress on these (and any other design issues), we need to update slider's dev and planning wiki page:

http://wiki.jqueryui.com/Slider

As far as implementing it, do you mean modifying ui.slider.js to have this feature, or doing it as an extension? I could speak to the first one. The second one is interesting, but perhaps not feasible.

- Richard

[Jörn Zaefferer]

Dragging the slider range should be a default feature, just as the
range itself is a default feature.

Jörn

[Todd Parker]

+1 for having this be the default behavior. The connector can get the
ui-state-hover on mouseover. I don't know if setting it to active
while dragging makes sense, maybe just keep it as the hover state at
that point.

On Apr 8, 8:31 am, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:

> Dragging the slider range should be a default feature, just as the
> range itself is a default feature.
>
> Jörn
>

[Richard D. Worth]

If you tabbed between handle 1, range, handle 2, wouldn't active be needed?

- Richard

[Todd Parker]

Do we set the currently focused tab/accordian/slider handle to the
active state in our plugins? Seems like there is a difference between
focused (= pointing at an element, ready for selection) and active
(selected).

I thought that focus mapped to ui-state-hover (perhaps a dotted
outline in some browsers). Just tested this on the demos and tabs
works this way, accordion has some tab issues.

On Apr 8, 8:38 am, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> If you tabbed between handle 1, range, handle 2, wouldn't active be needed?
>
> - Richard
>

[Richard D. Worth]

If I click the range with my mouse and let go, I should then be able to use the arrow keys to move it, just as I can with the handles. In terms of classes (and hence visual feedback), this should be no different than making the element active by tabbing to the element. However, looking at

http://jqueryui.com/docs/Theming/API
"
.ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.

.ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.
"

there's more of a difference here than I expected. I wonder if this relates to a question Scott G posed recently (http://groups.google.com/group/jquery-ui-dev/msg/a92f1889921b4815): is there ever a case where an element is hoverable but not also focusable, and vice-versa?

- Richard

[Scott Jehl]

Is it the "button-like elements" part that's throwing us off here? We should probably reword that to "clickable elements, such as a button", or something.

I think Richard has it right though. 

The range element should receive key and mouse states just like the handles, except that we're using the ui-widget-header state as its default class instead of ui-state-default.

This can probably remain the case, since it's nice having the range look slightly different than the handles.

I wonder though, when you focus on the range, should it appear that you've focused on both handles and the range, because in reality, that's really what you're doing (focusing on all 3). 

It's sorta like a selectable in that way; the range makes is a proxy to control both handles at once.

Perhaps we should mock up some of these situations in a static page to see what feels best?

[Scott González]

On Wed, Apr 8, 2009 at 10:27 AM, Scott Jehl <sc...@scottjehl.com> wrote:

Perhaps we should mock up some of these situations in a static page to see what feels best?

Did anybody ever think about this or mock anything up?  I think highlighting the range plus the handles would be good.

[Todd Parker]

+1 for just highlighting the range connector and both handles to when
dragging the connector. I don't know if we need a static markup, maybe
someone could take a crack at adding this behavior based on this
decision?

[Scott Jehl]

+1
and I think tab focus order should go:
1. handle A
2. handle B
3. Range (with handles A and B appearing focused as well)