angular-slider / angularjs-slider Goto Github PK

Hi, thanks for this project!

I have a question about a step function. When you look at my fork of your demo:
http://embed.plnkr.co/z7uOlJ6wAUUTi08fcgHa/preview

There is slider from 0 to 10. Step is 1. But when you slide, you have 2 steps for each number. Therefore step is not 1 but 2. Am I doing something wrong? How can I set step to be really 1?

It seems that it doesn't play well with angular 1.2.15 on my system

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.2.15/jqLite/nosel

The 9fa6c4a commit broke specific sliders were values are decimal.

For instance, the following slider doesn't work anymore and only display Integer values:

<rzslider class="slider" rz-slider-floor="0.5" rz-slider-ceil="1.5" rz-slider-step="0.1"
              rz-slider-precision="1" rz-slider-model="slider_data"></rzslider>

I can reproduce this on the latest versions of Firefox and Chrome. 0.1.6 simply won't update the model when touching/dragging the mouse, while 0.1.5 will work. I am not including jQuery in the project, it is all just angularjs with jqLite.

If it means anything, I am also using a touchscreen monitor which way or way not be a factor.

I'm using your latest rzSlider (as of this post). Also:

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"
src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"

If i have sliders on a second tab, they do not update until clicked. The bubbles stay pinned to the left side of the slider.

Is there a way I can get them to update or is this a bug?

Thanks!

Hi,

thanks for the module, its great.

using in this wee imagery app, but cant get the app to engage the sliders to be a range with min and max values .. always starting at the one end.

Imagery App

just zoom in to use the app then some images will appear on the left ... notice the date filter .. click that and you will see a date range ... but the sliders are at one end.

I create this on init

$scope.dateSlider = { min: 0, max: 0, ceil: 0, floor: 0 };

then change it once a data query comes back ...

I am using dates ..... unix ones....

so for labels ...
$scope.translate = function (value) { var _date = new Date(value); var _year = _date.getFullYear(); return _year; };

and when the data comes back i do this ...

`
console.log('floor', Math.min.apply(Math, $scope.responseDates), 'ceil', Math.max.apply(Math, $scope.responseDates));

        $scope.dateSlider.floor = Math.min.apply(Math, $scope.responseDates);
        $scope.dateSlider.min = Math.min.apply(Math, $scope.responseDates);
        $scope.dateSlider.ceil = Math.max.apply(Math, $scope.responseDates);
        $scope.dateSlider.max = Math.max.apply(Math, $scope.responseDates);

`

Any thing I doing wrong?

Hi,
I'm trying to disable the sliding event by user, I use your module just to display dynamically data.
Do you have an idea how doing that?
Thanks for your answer.

Just a small improvement... instead of using

rzslider {
...
}

... I'd suggest

[rzslider] {
...
}

Then CSS editors won't complain.

The CSS is written apply to an element called 'rzslider'. The directive allows the user of rzslider as an attribute with the "restrict: 'EA'" property. However, using the slider as an attribute to, say, a div, sees the CSS styles not applied, so the slider is not visible.

Usage
I am using the Range Slider of this example:
https://github.com/rzajac/angularjs-slider#range-slider

Issue
If minimum value is set to the same value as the floor value, then the value label is not being displayed. When you drag the min value, then value label appears even when dragged all the way to the floor value. So min does not behave as it should, like max for example.

Reproduce Example
JS Fiddle: https://jsfiddle.net/tjvuy4z5/1/

Hello guys!

I'm using the slider with dualknobs - as a range slider - and I'm applying the model and the high value but the slider wont initialize correctly. Both knobs are on the zero value.

Currently I'm using the 0.1.5 version - via angular 3.1.14 - because of 0.1.6 buggy and can't drag the knobs.

Hi,

Can you please help me to set up change event for first slider based on this demo URL http://plnkr.co/edit/53AUdB?p=preview

Currently we have get only single value using translate method but i need to get all $scope values of scope on change event.

I think it's makes sense for you.

Thanks.

Hi there,

I see that version 1.3.0 is the current version in the source but the current release version on the release tab and in bower registry is 1.2.0.

Could we get an update?

@jh3y

The rz-slider-step attribute in the rzslider directive doesn't support expressions and only supports values currently!

E.g. Something like

$scope.priceSlider = {
    min: 100,
    max: 180,
    ceil: 500,
    floor: 0,
    step: 10
};

<rzslider
    rz-slider-floor="priceSlider.floor"
    rz-slider-ceil="priceSlider.ceil"
    rz-slider-model="priceSlider.min"
    rz-slider-high="priceSlider.max"
    rz-slider-step="priceSlider.step"></rzslider>

won't work currently

while

$scope.priceSlider = {
    min: 100,
    max: 180,
    ceil: 500,
    floor: 0
};

<rzslider
    rz-slider-floor="priceSlider.floor"
    rz-slider-ceil="priceSlider.ceil"
    rz-slider-model="priceSlider.min"
    rz-slider-high="priceSlider.max"
    rz-slider-step="10"></rzslider>

works fine!

Currently 0.1.2 is the latest.

Firstly thanks for a great solution!

I have been using an older verison that had the rz-slider-update callback. I see this has been culled in the last few versions.

What is the proposed workaround for running a function on value change. I am using the slider inside a ng-repeat, so a $watch or a event is not optimal....

Thanks

Hello,

This one works
<rzslider
rz-slider-step="10"
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"

This one doesn't

<rzslider
 rz-slider-step="priceSlider.step"
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"

Given
$scope.priceSlider = {
min: 100,
max: 180,
ceil: 500,
floor: 0,
step:10
};

Thanks for the great plugin

please and thank you.

Hi!, i am trying to use this directive with Ionic Framework without any luck, the bar is displayed but both pointer dont move when i clicked on them, someone used it?

We ran into an issue where the initial layouting of the slider was correct on a desktop browser, but incorrect on a mobile browser. The width of the slider does not seem to be correct. Only after moving one of the thumbs, the slider is redrawn and the width is correct.

We fixed this by moving the calcViewDimensions() call in the init method to the $timeout block.

Now the selection bar "" is rendered only when I define two pointers, such as the first example in your plunker (http://embed.plnkr.co/53AUdB/preview).

It's better if the selection bar appears when I want, also when i use only one pointer..
You could set the selection bar in slider only by configuration or whatever you want.

If you make this issue you make me happy :)

thanks.

PS: I can't send a screenshot of what I am thinking because github have some problem with uploads. I will upload an image as soon as i can.

Hi,

Is it possible to format the values of the attributes model and high shown in the tooltips on the top the selection sides?
If it is not possible could i hide the tooltips ?
Thank you

Hi, can you mention the browser support (desktop & mobile)? Thanks.

rz-slider-step="1000"
Sets the slider to increments of 5000—20000 and steps on the 1000's place.
But is not stepping by 1000's, {{ userAmount }} will be 995 for example.

Fairly new to CSS/HTML but i can't figure out the selector for this part of the bar.

I've gotten all the other portions styled except this part (sorry crappy paint skillz, RED used for emphasis):

P.S. great library 👍

Currently a user can set high and low as equal but what if there is a use case where such a thing is invalid?

Also high and low pins shouldn't cross over in this use case.

I am creating a slider with a floor of 0 and a ceiling of 4.
This would indicate the slider has 5 positions (0 to 4). Instead there are more steps indicating the same value. and dragging the slider becomes unresponsive. See plunkr below.

http://plnkr.co/edit/ausbFR3Og5RIB532vfxF?p=preview

When using on a clean slate,

link: function(scope, elem, attr) {
                return new Slider(scope, elem, attr);
            }

gives me this error:

TypeError: object is not a function
    at link (http://mywebsite.com/. . ./rzslider.js:872:29)

Any ideas on this one?

We love your module by the way!

Why it could be when Input controls Slider, but Slider doesn't control Inputs? Two-way binding slider-scope doesn't work correctly.

Hi!, It's really a great work and I really liked the design of these sliders, while I was implementing these in my project, I seen that ng-model-high and ng-model-low values are not defined I guess for this widget, hence if you type some very high value in range textbox then slider really go outside the window. It will be really great if you can fix this or let me know the other solution out of that, My requirement is define a slider between 0-200 (lets assume) and ng-model is tied with a textbox instead of label and user will not be able to type in textbox below 0 or bigger no than 200, but he is allowed to type any no between 0-200 and in decimal also e.g. 198.9. One more thing the step is not accepted for decimal values less than 1, If I want slider to step with value 0.5 then it's not working.

Thanks
Jitender

Add a boolean-option so the limit-numbers can be displayed or not. Default value should be that they are displayed.

Hi, when i try to output a slider outside the looping div, its outputting the correct value.

But when i tried to put it inside ng-repeat, the blue circle always stay in the zero value. But when you click on it, the circle will move to the specified value. I hope you can help me on this one.

The bubble on the top of the pointer isn't positioned correct until slided all the way to the left.

The position of the left bubble does not dissapear.

The position of the right bubble is outside the container.

We used the slider in a project, where we need to update the value of the step, based on a selection we made. I could not find a way to change the step from the outside, so we added this line to the script:
setMinAndMax: function () {
...
this.step = this.scope.rzSliderStep;
...
}
Is there another way, or can this be added to a next release?

Currently the rzslider directive is an Element directive as a result of which it cannot be used on IE.

Should support Attribute based directive as well.

I tried to use this plugin in an angular project.
It is great that it enables slider inside ng-repeat, but it is not working on mobile.
I know that it works on mobile originally, but just not working on my angular project.

Just wonder how to make it work on mobile? Any additional plugin like modernizr?
(I have already included angular-touch and have ngTouch module in my app)

Hi,

First of all, you have done a great work done here.

I want to resize the blue circle on the borders of the selection but i could not find how to do it from the less file.

I have tried to change in the css file span.rz-bubble.top and span.rz-pointer.width and height to 16 px but it looks ugly.

Thanks

In this line (and some other), event listener is unbind in this way:

$document.off('mousemove');

The problem is that it removes all the listener on the page and so, it can break other plugins using this event.

The good practice is to namespace your event like this:

$document.on('mousemove.rzslider', angular.bind(this, this.onMove, pointer));

//and later
$document.off('mousemove.rzslider');

Hi,
I am getting familiar with your control and would like to know if there is undocumented support for tick marks on the bar or forthcoming features for such.

Thanks,
Marc

There's a rogue console.log in the rzslider.js, any chance we can get that removed?

Hi, Great job on this slider! I have an application where it's important for the slider to display vertically rather than horizontally. Is this possible? If so how would I do it?

Thanks, I really appreciate the simplicity and elegance and 'no dependencies' in your code.

Hello rzajac!

There is a problem, while I was cloned the repo, the examples are not working. However I was looked for the demo on plunker you provided and copied the "min" version and it works (I'm on angular 1.3.4).

Could you update the repo?

When dragging the normal slider to the left completely, it stops working. The "hidden" highPointer ruins it apparently. hideEl() should return element.css({display: 'none'}) for the highPointer instead of opacity 0. Otherwise a z-index lower than for lowPointer.

Not sure what solution is the best.

It would be great to be able to edit the template for the slider. Maybe an attribute in the directive? What do you think?

The slider is really sluggish on Firefox.

When using the rzslider within a tabset the UI of the slider looks odd. If I resize the window it get adjusted properly.

The way i handled it was added a custom event like you have captured resize to readjust the style and then call it on change of tab. Is there any other cleaner way of doing this?

Hello.

If you accept feature requests, I think the slider would benefit from a way to supply some kind of a filter option. I would like to parse the maximum and minimum limit values with standard angular "number" filter, and I am unable to do so, rendering slider inconsistent with all of my project's number values.

Transiterate has a nice way of doing so, if an example helps: http://witq.github.io/ng-transiterate/#/usage

Otherwise quite well done slider, certainly best I found so far. Good job.

Cheers,
Maciek

Hello,

i have the following error with version v0.1.16 with the file /angularjs-slider/dist/rzslider.min.js:
Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a

It work fine with the file /angularjs-slider/rzslider.js