danielcrisp / angular-rangeslider Goto Github PK

I'm using the following slider definition

<div range-slider
                    step='6'
                    onHandleUp='handleUp'
                    onHandleDown='handleDown'
                    min="sliderAge.min"
                    max="sliderAge.max"
                    model-max="sliderAge.maxModel"
                    model-min="sliderAge.minModel"

                    ></div>

while in my controller, I've got the following two functions:

    $scope.handleUp = function() {
        console.log("Handle up");
    }
    $scope.handleDown = function() {
        console.log("Handle down");
    }

Unfortuanately I can't see "Handle up" nor "Handle down". Could anybody elaborate ? Also, the documentation needs to be updated to reflect the onHandleUp/down usage (i'm not sure if I am using it right!)

Hi I am using Range slider like this way

what i need to know slider does show modal-max value or current value changes instead of showing max value at right most side.

Can you help me how to show maximum value?

Would it be feasible to let users to add a custom template?
I need to use your range selector in a form-group, so I need to show values inline (inside the control).
So I thought I could put the values on the sliders, removing the arrows.

This is a screenshot of the result:

To accomplish this I had to modify css and the template.
These are the simple changes:

custom.css:

.ngrs-range-slider {
  margin: 0;
  padding-right: 10px;
}
.ngrs-range-slider .ngrs-runner {
  height: 22px;
}
.ngrs-range-slider .ngrs-handle {
  width: 24px;
  text-align: right;
  padding-right: 6px;
}
.ngrs-range-slider .ngrs-handle-min i {
  background-image: url("");
}
.ngrs-range-slider .ngrs-handle-max i {
  background-image: url("");
}
.ngrs-value-inline {
  font-size: .9em;
}

template:

template: ['<div class="ngrs-range-slider">',
                '<div class="ngrs-runner">',
                '<div class="ngrs-handle ngrs-handle-min"><i class="ngrs-value-inline">{{filteredModelMin}}</i></div>',
                '<div class="ngrs-handle ngrs-handle-max"><i class="ngrs-value-inline">{{filteredModelMax}}</i></div>',
                '<div class="ngrs-join"></div>',
                '</div>',
                '<div class="ngrs-value-runner">',
                '<div class="ngrs-value ngrs-value-min" ng-show="showValues"><div>{{filteredModelMin}}</div></div>',
                '<div class="ngrs-value ngrs-value-max" ng-show="showValues"><div>{{filteredModelMax}}</div></div>',
                '</div>',
                '</div>'
            ].join(''),

The css can be put in a .css file to be loaded after the original one.
The template is instead currently hardcoded in js script.
Would it be possible to add a parameter for users to load a custom template?
Or, in alternative, could you think of an option like "showValuesInHandles"?

Hi,

How can I remove the decimal numbers from the min and max range values. I set the min to "50" and max to "10000" but the slider shows "50.00" and "10000.00" , I need "50" and "10000".

How would I do this?

This is my code at the moment:

<div range-slider min="demo.minPrice" max="demo.maxPrice" model-min="sliderRanges.min" model-max="sliderRanges.max" decimal-places="0" filter="currency" filter-options="£" step="10" disabled="false"></div>

Thank you in advance :)

I used onHandleUp to update my model only after the user drops the slider; however, the angular $apply isn't called by default which makes the parameter somewhat non-angular. I think it should be called like this

 if (angular.isFunction(scope.onHandleUp)) {
      scope.$apply(function() {
             scope.onHandleUp();
      });
  }

And similarly for onHandleDown.

I am noticing that the slider jumps to hundred when the value of model-max is not defined. This happens when I am using a field of a json object to bind to model-max. Something like options = {} and model-max binds to options.something. I am also setting pin-handle to min. Even if was set to 0 when null, it would be still graceful.

Thanks

Does it work with Angular 1.3, cause I'm having some issues to implement this in my project.

HTML

<div range-slider min="price_min" max="price_max" model-min="price_min_handler" model-max="price_max_handler" disabled="false"></div>

JS

$scope.prices = [20,30,45,50,52,110,130,200,220];

    $scope.price_min = $scope.prices[0];
    $scope.price_max = $scope.prices[$scope.prices.length - 1];

    $scope.price_min_handler = $scope.price_min;
    $scope.price_max_handler = $scope.price_max;

I'm getting no errors yet the slider doesn't work.

I need to add the slider but on vertical orientation with values from bottom-to-top. Currently it supports only top-to-bottom. Is it correct?

Update: I am able to workaround that by setting negative numbers for min/max/model-min but it would be nice to have an option to do that automatically.

<div range-slider
    min="-100"
    max="-30"
    model-min="model.zoomValue"
    orientation="vertical"
    on-handle-up="zoomChart()"
    pin-handle="max"
    show-values="false">
</div>

can it be done, can someone make a PR ?

When the rangeSlider is used with an input field of type="number", on any change of the slider, Angular throws errors:

Error: [ngModel:numfmt] Expected 2160 to be a number
http://errors.angularjs.org/1.3.8/ngModel/numfmt?p0=2160
at REGEX_STRING_REGEXP (angular.js:63)
at Array. (angular.js:19863)
at Object.ngModelWatch (angular.js:20971)
at Scope.$get.Scope.$digest (angular.js:14217)
at Scope.$get.Scope.$apply (angular.js:14488)
at HTMLDocument. (angular.rangeSlider.js:583)
at HTMLDocument.jQuery.event.dispatch (jquery.js:5095)
at HTMLDocument.jQuery.event.add.elemData.handle (jquery.js:4766)

The value in the input fiels does update. It all works ok, but still the errors are thrown.

The error is not thrown when the input field is changed directly.
If input field does not have the type specified, there is no issue. It then works correctly, but all HTML5 goodness related to input type="number" is lost.

I created a plunker, which for some reason does not work (another issue?). Can't find the issue in the plunkr, but you can copy that code to chrome and see what I mean. Link to Plnkr: http://plnkr.co/edit/LFtWWGk9FV5XGDTaaPiA?p=info

Is there a way to use rangeSlider in combination with input type="number"?

Is there the posibility to use steps lower 1 (decimals)?

Instead of only be able to pull the handle back and forth, be able to click on the slider where you want it to go. Like this example: http://angular-ui.github.io/ui-slider/demo/demo.html (however, I'd rather use this slider instead of the ui-slider since it is getting some major changes soon apparently).

I have a collection of filters containing many ranges some of which are continuously variable and others of which are discrete and have a very limited number (5 - 10) of possible values. The continuously variable ranges are a natural fit for the range-slider. And the discrete ranges could also potentially be displayed using the range-slider. While the range-slider can indeed be used to display a small set of discrete values, the user-experience is not ideal because the (continuous) range-slider metaphor suggests to the user that all of the values including values between the discrete points are also valid. So I find that a more intuitive user experience is provided by showing the user a drop-down list of the discrete values. Nevertheless I think the range metaphor is quite helpful and intuitive when there are neither too few nor too many discrete values and when the user is typically wishing to select a range of them. But it is a much better experience for the user if the range snaps to a valid value. And it also provides feedback as to what that value is.

In the case users min and the min are 0 the tracker/button for min dissapears.

Usually range sliders are used to filter. But I can't determine when the slider values have changed.

ng-changeseems not to work and

$scope.min = 0
$scope.max = 10
$scope.$watch 'min', () -> console.log "hh"

Does also not work for me.

I just implemented the range slider. Working well, but i noticed that the onMouseUp event gets called 1 time, the second time i release the handle it gets called 2 times, 3rd 3 times...and so on... The problem(i gues) is that $document.bind(offEvent, ...); is called every time when an handle is pressed. This leads to this that the offEvent is bound X times to a slider and the onMouseUp event gets called X times.

I want to bind an http get task on the onMouseUp, so i realy need the event to fire just once.

My quick fix was to unbind the offEvent every time before bind, but that is not the best solution i gues:
$document.unbind(offEvent);
$document.bind(offEvent, ...)
...

I would like to display a range between two hh:mm values.
What I did now, was converting the values into numbers representing the minutes, like:

• 00:00 = 0
• 23:59 = 1439

is it possible converting the display of the values to something like:
parseInt(time/60)+':'+((time%60 > 10) ? (time%60) : '0'+(time%60)
using the filter?
I couldn't find any help on how to use the filter, except for the currency example.

Hi Daniel,

I like very much your directive for our website and a great thank for that!

I have a question for a new feature. Do you think it would be possible to add some fixed text value along the line and keeping "magnetic" cursor to force user to choose only those ones? I did an example with Photoshop into attachment.

Thank,

have a nice day.

@danielcrisp range slider not working in my app. because i am using AngularJS v1.2.21 and
jQuery 1.7.2.min. So can you fix it.

Add minified versions of script and css

Hi,

Just wanted to check if the "step" values can be given in decimal. I have "step" values for few sliders ranging from 0.1 to 0.5. I set the value to 0.1 but looks like it is not working. Any idea on how to resolve this ?

Thanks,
Anirban

Hi!
I have an array of values lying between 0 and 1.
Is it possible to set step to 0.01 to enable user to set the slider to [0.50;1.00]?
It seems to me, that it does not work this way: step = "0.01", could you suggest something?
Thank you!

Any plans to support date / time as well? Thanks!

https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js#L264
https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js#L291

setMinMax() and setModelMinMax() do a lot of checks that are called on each tick when moving the slider (at least setModelMinMax). Wouldn't it be possible to run these checks at setup? It would probably be saving some uneccessary processing.

On mobile devices moving the sliders is difficult. An improvement would be to have an invisible ‘hitbox’ around the handles to improve the mobile user experience.

$swipe responds to both mouse and touch events. There is mention in the documentation that it responds quicker than click events (four handle down?).

how to bind the event in this slider ?
specially when slider stops sliding.

How we use Decimal numbers in range slider ?

The current version of the rangeslider does not work when using angular 1.2.10.
The following error message will be thrown:

TypeError: Object [object Object] has no method 'show'
at Object.setPinHandle as fn

The slide handles doesn't respond to dragging in IE11

If you change model values in the on-handle-up function, the $watch is not triggered and changes are not visible until you manually move a slider; then all sliders on the page update to their correct positions.

You can see this behavior in this plunker with the three sliders, the third being the sum of the first two, and the second is updated to always be greater than the first.
http://plnkr.co/edit/tQRTWm1GYhSCuOyyoxiv?p=preview

Is there a way to set the fractionSize setting for the currency filter?
Using the common syntax in either filter or filter-options attributes won't work (filter='currency:$:0'or filter-options='$:0')

Tried using the range slider on a touch device but the pins don't move on it!

Is it possible to get this working with ng-change?

It would be beneficial to include license with this repository so other developers know on what terms we can use your directive.

There is some logic in the handleMove function that adds a z-index to the handle if it's over a certain percentage, but it doesn't handle if the modelMin is over that percentage on initial page load.

I'm adding this:

if (scope.modelMin === scope.max) {
    angular.element(handles[0]).css('z-index', 3);
}

right before the end of the setModelMinMax function as a workaround for now, but I don't think that handles all cases or orientations.

Are irregular step values supported? Currently i found no way to add irregular step values like 1, 5, 7 ,21, 32, 1400.

To me the library doesnt work in angularJS 1.4.0 stable. Could you fix this? handlers show up but cannot move them. Thank you. You have a lightweight library that's why i like it. I tryed in 1.3.15, works. Bow install 1.4, doesn't work anymore.

There isn't any documentation about data-show-values="true" option which will enable current value show on slider.

The step option is not working when the value is less than 1.

You should change main files to an array that lists the css dependency as well.

Maybe I'm missing something but Slider works but not seeing min & max values at either end. Have styling on the slider showing fine and can manipulate the slider but just missing the min/max values at either end under the slider.
Have added my own divs with binding to values which works but I'm pretty sure I should be seeing it by default...

There should be a way such that we can disallow the min and max models to have the same values. We can have a boolean attribute for the same and max from decreasing (and min from increasing) after difference between them becomes equal to step size.

Currently bower will only pull down v0.0.03 as tags are not up to date.

Also, is there a reason there is a dependency on unstable-angular-complete instead of latest stable?

Thanks

TypeError: Object [object Object] has no method 'hide'
at Object.setPinHandle (http://localhost/bower_components/angular-rangeslider/angular.rangeSlider.js:184:53)
at Object.applyFunction as fn
at Scope.$digest (http://localhost/bower_components/angular/angular.js:11808:29)
at Scope.$delegate.proto.$digest (:844:31)
at Scope.$apply (http://localhost/bower_components/angular/angular.js:12061:24)
at Scope.$delegate.proto.$apply (:855:30)
at done (http://localhost/bower_components/angular/angular.js:7843:45)
at completeRequest (http://localhost/bower_components/angular/angular.js:8026:7)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost/bower_components/angular/angular.js:7982:11)

Angular version : 1.2.10
Jquery version : 2.1.0

Any idea ?

Slider doesn't react on any mouse events

How would I use the slider for a range of 0 to 1 and step 0.1? simply setting step to 0.1 does not work.

I'm attempting to set a buffer between the sliders and its larger than the Step value that I want. The depencency of the prevent-equal-min-max on the step value means I cannot customize it (right?)