Initializing angular slider gives the following error:

The specified value ':)' does not conform to the required format, 'yyyy-MM-dd'.

in Version 39.0.2127.0 canary (64-bit)

Hi Guys,
is this repo still maintained?
If so, it seems like the slider isn't responding inside a $modal.

Thanks!

I tried to mimic your usage and have had no success. Whenever i use ng-repeat, the slider stops displaying properly even though it is receiving the values.

This is a link to the use case that's breaking the slider.

http://plnkr.co/edit/1JNX2vCsotYwGAxEUZU0?p=preview

On most other ui sliders you can click an arbitrary position on the bar and the pointer will snap to that position. On this it does nothing.

Hello,

I having the following error with Angularjs 1.0.7:

Invalid isolate scope definition for directive slider: =?

From the documentation, only @, @attr, =, =attr, &, &attr are possible.
http://docs.angularjs.org/guide/directive

Thanks for this nice slider by the way :)
Matthieu

I have some values in ng-model object, but sliders position is initilal. Hmm...

from what i can tell the slider sets the model value as string not as number, this breaks ngModel for input[type='number']
example:

<label for="min_price">Min: <input type="number" step="50" min="0" name="min_price" id="min_price" ng-model="min_price"></label>
<label for="max_price">Max: <input type="number" step="50" min="0" name="max_price" id="max_price" ng-model="max_price"></label>
<slider floor="0" ceiling="2000" step="50" ng-model-low="min_price" ng-model-high="max_price"></slider>

in the prev example the inputs appear as blank and dose not work at all

The main thing we faced is while we are dragging a bubble and if try to drag the another bubble without dropping the previous bubble causes some problem. say i have dragged min bubble to max value and mouse up outside of selection bar, and click on max bubble try to drag causes issue.

User should not able to change the range of slider. Can it possible with it?

we need a function in scope[in Controller.js] to be called on mouse up [from angular-slider.js] so that we can send a request to server, but as of now we are sending request on slide[mouse move].. which causes several request and it overloads server

As you can imagine, the translate attribute is used by several translate modules for angular-js, making this directive incompatible to them. How about giving it (and maybe all other directive attributes) a slider-prefix?

Applying the scope changes on the mousemove event is costly to process on large resultsets. Is there a way to overcome this?

Love your product and thank you!

here is a working example:
http://plnkr.co/edit/YrIqJcz33CDAXyD6DBMh?p=preview

Say you want to go from 0 to X and have it color blue everything up to X

Here's the hacky way I'm doing it now in CSS, it would be cool if it was a feature

slderHolder is a div the slider is in

.sliderHolder>.pointer {
display:none;
}
.sliderHolder>.pointer~.pointer {
display:inline-block;
}

How soon might this feature be added! Awesome work btw :)

Noticed wrong behaviour on pointers overlap on the max bar value.
Once I did that slider seems to be broken, we can drag only Min point, Max doesn't respond to the click/touch.

See screenshot/

1. Set range as well on the screenshot
   
2. Try to drag Max point. Here you will observe wrong behaviour
   

If jQuery is loaded, then AngularJS uses jQuery but it seems that the Event object for jQuery doesn't provide a touches property, making the touch handling fail for angular-slider.

There are cases where a logarithmic scale makes a lot of sense, e.g. price filter on a comparison site - where high definition is required at the low-end and not in the high-end.

Make selected range draggeable.

As per:

http://jsfiddle.net/omnosis/Swd9S/

Steps to reproduce.

1. set max pointer to maximum value
2. set low pointer to maximum value
3. move one slider to lower value.
4. Moving max pointer occurs moving of low poniter

Checked only in Chrome.Version 29.0.1547.76 m

Doesn't work inside an ng-repeat. http://plnkr.co/edit/QcOj4mZKxz5rmsSC1wun?p=preview

I am using express and I send to renderer

var html = '';

res.render("index",{html: html});

Slider is shown, but interaction is not possible and min, max, value are not in use.

eventX = event.clientX || event.touches[0].clientX; gives me error but I need read from
eventX = event.clientX || event.originalEvent.touches[0].clientX; to get the correct X value.

When moving the lower pointer to the right side of the upper pointer or the other way round (moving the upper pointer to the left side of the lower pointer), the class active is not remove from the correct pointer.

Hello, here is plunker to recreate the issue.

http://plnkr.co/edit/1N3wfm2YlVyEMRsu3oOb?p=preview

I would find it helpful if translate had the option of being model-aware in addition to being passed the 'dumb' numerical value of the slider.

For instance, with

$scope.obj = { cost: 25.00, units: 12345 } 
// where obj.units is the `ng-model`

I'd like translate to be able to resolve obj.cost * obj.units.

At the moment I have the following work around:

    $scope.translate = function(obj) {
        return function(val) {
            return "$" + (obj.cost * val);
        };
    };

<slider ng-model="obj.units" translate="translate(obj)" ...>

which works because of how translate is invoked.

Full support for this feature I think would expand the usefulness of this directive.

Thanks for your work.

If I include jQuery, the touchmove events don't work on mobile browsers. http://jsbin.com/tukomono/1/edit

I'm seeing that the demo doesn't work in IE8, is that right? Is there a plan to support it at some point?

I want to change the color of the handle programmatically. the CSS class is

CaptchaSlider .slider-handle {

background: red;

}

I would like to do this via jQuery like you changed the div RGB in your example.

$('#RGB').css('background' rgb(255,255,255));

Thanks,

Warren

On row 262: eventX = event.clientX || event.touches[0].clientX;

When event.clientX === 0, it is considered false, and event.touches[0] are used instead. However, on a desktop, event.touches don't exist, so the script crashes with the message: "Uncaught TypeError: Cannot read property '0' of undefined".

Simple question, it's hasn't been update for months....

Hi!

This is more of an enhancement request that an issue and I have noticed that is has been brought up previously. Please have a look at my posting on StaceOverflow:

http://stackoverflow.com/questions/19587147/pass-mousedown-and-mouseup-events-from-directive-to-controller-in-angular-slider

Can you please advise how can i added limitation to the slider
for example i have range slider that i don't want the user can choose value lower than 5.
i handled the left and the right parts, but can't handle the center part

but the center is not working when i get into 5 it stopped than you can pull and get to zero

this is the code i added to:

var centrer_range_left = scope[refHigh] - newValue;
var centrer_range_right = newValue - scope[refLow];

              if (newValue < 5 || newValue > 95 || newPercent >95 || newPercent < 5 || Math.abs(centrer_range_right - centrer_range_left) < 4 || Math.abs(centrer_range_right - centrer_range_left) == 0 )
              {
                return;
              }

I am trying to use the directive in a plain html (only element is the slider), and after the scope 'settles' (rendering finishes), the two handles are in 0 position. It turns out that the value for the fullBar, on which the rest of the positioning is based has a value of 0.
For me it makes sense, since the dom rendering should not be done at the point of post-link (should it?), but i was wondering what container/wrapper style makes the examples actually work?!

Puzzled...

edit: it turns out the use of ng-repeat is the culprit...if i use one item, it has correct width (sadly that is no option for me right now, i need it bound to an array of items).

edit2: looking at the example source code i see that the slider is not used on the page as in the example, eg. not inside an ng-repeat directive...Is this a known issue?

Hi,

I am trying your slider component in angular 1.2.
Unfortunately floor, ceiling and translate values are missing.

 <span ng-bind-html-unsafe="translate({value: floor})" class="bubble limit" style="opacity: 1;"></span>
  <span ng-bind-html-unsafe="translate({value: ceiling})" class="bubble limit" style="left: 497px; opacity: 1;"></span>
  <span class="bubble" ng-bind-html-unsafe="translate({value: ngModel})" style="left: 141px;"></span></slider>

Am i missing something here?

Kind Regards
Kay

Browsers affected

• Chrome 27
• Safari 6.0.5
• Firefox 22

Steps to reproduce

Have a look at the below plunker:
http://plnkr.co/edit/xG8Ui1t2lOL5JqQFL8Z2?p=preview
check the "settings" checkbox
and note that the initial position of the pointer is incorrect on the second slider.

This happens every time when slider is initialised within a hidden dom element.

Hello.

I'm using the angular-slider and I have successfully made it work with my controller. However I'm not getting any labels above the slider as in the examples. I have followed the examples but without success.

HTML:

<slider ceiling='100' floor='0' ng-model-high='report.columns[$index].max' ng-model-low='report.columns[$index].min' precision='1' step='5'></slider>

I need to set max range dynamically. I am using slider five times in a page to filter table data. Data is coming from json and slider is working fine. I need to set the max range dynamically.

I have added static values in ceiling like this "ceiling="1000" and also set "upper_Range = 1000" in js file. I am trying to add these values dynamically so if the data having value in between 10 then max value need to be 10 and if data having value in between 100 then max value need to 100.

How can I do this. Please suggest.

Is there a way to initiate it with a specific value? Thanks!

Hello! I'm new to angular. Made some tutorials here and there.
And I couldnt run slider in my project.
I included mi.js file before angular. Somehow i found out that i have to add 'uiSlider' to my app module dependencies (near my 'ngResource'). Then I added <slider...> to my template and got error in console
Error: Unknown provider: nProvider <- n <- sliderDirective
Now i dont know what to do :( Could you help me? And maybe add "Usage" section to README.md? Thank you!

When the slider is wrapped with-in an element that has an ng-show defaulted to false, the slider does not appear correctly initially.

Code example:
javascript:

var app = angular.module('practice', ['uiSlider']);

app.controller('sliderCtrl', function($scope) {
    $scope.name= "Temp";
    $scope.lowAge= 30;
    $scope.highAge= 45;
});

html:

<body ng-app="practice">
    <div ng-controller="sliderCtrl">
    Slider wanted?<input type="checkbox" ng-model="wantSlider" />
        <span ng-show="wantSlider">
            <p>Name: {{name}}</p>
                <p>Minimum Age: {{lowAge}}</p> 
                <p>Maximum Age: {{highAge}}</p> 
                 <slider floor="10" ceiling="60" ng-model-low="lowAge"
                            ng-model-high="highAge"></slider>
        </span>
       </div>
    <script src="app.js"></script>
</body>

With this code block the initial pointers will both be placed to the far left. Once I attempt to drag the pointers the slider is displayed correctly.
This bug has been verified on Chromium Version 28.0.1500.71 Ubuntu 12.04 (28.0.1500.71-0ubuntu1.12.04.1) and Firefox version 23.0 for Ubuntu 12.04

Nice work! I like that there's no dependency on jQuery too.

If you're open to feature requests, the only thing "more" that I'd want in a slider is the ability to turn it vertical. What do you think?

I tried using this for this ng-repeat:

<div ng-repeat="image in site.images | startFrom:currentPage*pageSize | limitTo:pageSize">
  <img class="siteImage"  width="{{image.width}}" height="{{image.height}}" ng-src="/images/{{site.name}}/{{image.file}}" ng-click="loadViewport(image._id, site.name, image.file, image.width, image.height)" />
  <slider floor="100" ceiling="{{image.height}}" step="1" precision="1" ng-model="image.height"></slider>
</div>

Everything is showing except the slider... all it renders for the slider is:

<slider floor="100" ceiling="384" step="1" precision="1" ng-model="image.height" class="ng-pristine ng-valid"></slider>

In range slider, when set max = min then can not set max value. In your example demo. Set min = 60 and max = 60 then can not re set max =50?
Thanks!

Is it possible to have custom labels on the slider? I imagine I can pass an array of labels that can be used to label points on the slider.

Is this possible now? Thanks.

Hi guys!
I'd like to disable the slider depending on a scope parameter, for example to suppress slider interaction referring selection. Is there a generic way to disable the interactivity of the slider directive? Or do I have to fix that within the angular-slider plugin? Thanks!

Hi,

I'm using the slider with angularjs and Twitter Bootstrap 3.0, but I have not text value on it !

this is mys code :

<div class="col-sm-2">Word Candidates :</div>
<div class="col-sm-10">
    <slider floor="0" ceiling="19" step="1" precision="1" ng-model="wordcandidates"></slider>
</div>