Skip to content

Double-Display of Value When Range Is a Single Value #245

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.

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

Closed
eriksendc opened this issue Feb 2, 2016 · 6 comments
Closed

Double-Display of Value When Range Is a Single Value #245

eriksendc opened this issue Feb 2, 2016 · 6 comments

Comments

@eriksendc
Copy link

Hi All,

I have a case where I'm using the slider like this:

<rzslider rz-slider-model="activityLevelSlider.min" rz-slider-high="activityLevelSlider.max" rz-slider-options="activityLevelSlider.options"></rzslider>

I set up the slider in my controller like this:

    $scope.activityLevelSlider = {
        min: 1,
        max: 3,
        options: {
            floor: 1,
            ceil: 3,
            translate: function (value) {
                switch (value) {
                    case 1: return 'low';
                    case 2: return 'average';
                    case 3: return 'high';
                }
            }
        }
    };

The 2.6.0 behavior was showing "low - low" for example, when both ends of the range were on 1. I dug into rzslider.js and found updateCmbLabel: function() {.... In there was a line of code like this:

this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);

I wrapped that in an if like this:

      if (lowTr === highTr) {
          this.translateFn(lowTr, this.cmbLab, false);
      } else {
          this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
      }

I'm a total newbie at contributing and don't really know how to use git or github yet. I'll try to do some learning about that so I can contribute myself. But I thought I'd post this here in the meantime.

Thanks,
Brian Eriksen

@ValentinH
Copy link
Member

This is a similar request than #112 but we sort it differently. Since you are the second person who needs it we can add it to master. If you want it ASAP, you can provide a PR or I can do it later. See https://github.com/angular-slider/angularjs-slider/blob/master/CONTRIBUTING.md

@eriksendc
Copy link
Author

Hi Valentin,

Thanks so much for considering my idea. I don't need it ASAP, and I do appreciate the pointer to how to contribute. Again, I'm still quite new at using GIT and running test and all that. If I get time this weekend or next I'll try and learn so I can contribute directly. If you decide to add this functionality yourself let me know.

Thanks again, and thanks for the great slider control!

Regards,
Brian Eriksen

@ux-engineer
Copy link

@ValentinH I just upgraded to 2.12.0 and came up with this issue – it didn't appear with 2.4.0:

With range where min and max values are set to be same as floor and ceil.

Slider loads like this:
first

...and after clicking the marker once, it suddenly jumps to be like this:
second

@ux-engineer
Copy link

Thanks @ValentinH – I'm using the slider on a modal screen, and adding this to modal's controller this problem was solved (as for my knowledge Angular UI's modal instance doesn't have proper event for hooking into here...?):

setTimeout(function() {
    $scope.$broadcast('rzSliderForceRender');
}, 100);

@ValentinH
Copy link
Member

There is a demo with a slider inside a Angular ui modal on the demo site ;)

ValentinH pushed a commit that referenced this issue Jun 7, 2016
In 3afcce9 commit, I changed the behavior of the combined label for range slider. However, this
broke previous implementation, so this commit add an option to configure this feature. The default
behavior is back as previously: If the slider values are the same, the combined label is 'X - X'

Related to #245
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants