Draggable range

[coxm]

Adds an option to make the range draggable when in use.

[ValentinH]

What is true here?

[coxm]

Do you mean the active: true property? It's used in onStart to determine which move handler (onMove or onDragMove) is used.

[ValentinH]

Sorry I thought the comment was attached to a unique line...
I was talking about the true in:
this.onStart(pointer, ref, event, true);

[coxm]

Ah, that's a mistake. Originally I was passing an extra argument to onStart, but now it's using this.dragging.active. I'll remove the extra true.

[ValentinH]

Thanks for this PR, this is a pretty cool work!

Just a few remarks:

• the model is not updated when dragging the range (inside the text inputs): I think you forgot a this.scope.$apply()
• the name of the option attribute is too generic. Why not something like rz-slider-draggable-range?
• dragging shouldn't only work when clicking on the selection bar? Now it works when clicking outside of it too... Feels pretty weird to me.
• remarks directly in code comments

[ValentinH]

this.fullbar -> this.selBar

[coxm]

Cool, thanks!

• You're right about the scope.$apply(); I'll add this in.
• OK, I agree that rz-slider-draggable-range is better.
• I hadn't noticed this; I'll fix it soon.
• I'll address these in the code comments

[coxm]

I think that's everything!

[ValentinH]

Yeap this looks good to me.

One last remark: now if you click just above the range, the min handle moves. I think that the perfect behaviour would be to drag the range bar when clicking between the min and max handles.

Currently, the handle the clicks outside the bars, we have a bar wrapper to enlarge the clickable zone. Maybe it would nice to have the same around the selBar...

[ValentinH]

I manage to do it like this:

in the .less file:

rzslider span.rz-bar.rz-selection {
  //removed the width: 0%
  z-index: 1;
  background: @barFillColor;
  .rounded(@barHeight/2);
}

in the .js file, I wrapped the rz-selection span with a rz-bar-wrapper:

var template = '<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>' + // 0 The slider bar
              '<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span>' + // 1 Highlight between two handles
              '<span class="rz-pointer"></span>' + // 2 Left slider handle
              '<span class="rz-pointer"></span>' + // 3 Right slider handle
              '<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
              '<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
              '<span class="rz-bubble"></span>' + // 6 Label above left slider handle
              '<span class="rz-bubble"></span>' + // 7 Label above right slider handle
              '<span class="rz-bubble"></span>'; // 8 Range label when the slider handles are close ex. 15 - 17

Could you please try it and tell me what you think?

[ValentinH]

Last but not least: don't forget to run the grunt task to generate the dist files. ;)

[coxm]

That was quick ^^.

I'll try it out now - and commit the dist files :)

[coxm]

Looks good to me! I'll commit it and include in the PR.

[ValentinH]

There are conflictuels apparently... Can you rebase on top of the master? I pushed a commit yesterday. That might be the reason.

[coxm]

I think the conflicts may have appeared because of the dist file changes, but I'll rebase and check again.

[coxm]

Rebased!

[ValentinH]

Actually, again about rebasing, can you rebase everything and merge all your commit into one?

[coxm]

OK, rebased and squashed! Sorry for the delay.

[ValentinH]

Perfect!

[alanquigley]

This is a great feature, wondering if it would be possible to lock the range length?

[ValentinH]

You mean that the user would not be able to drag a single toggle and only drag the whole range?