seiyria / angular-bootstrap-slider Goto Github PK

As the title says.

Hi

i am banging my head on this error.during load:

Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-slider.js:358

i know it is in my code as the samples work fine. I was hoping someone else may have seen/solved the issue before I slowly take my app apart.

Thanks

Just include slider.js and use the package ui.bootstrap-slider.

I actually had to include seiyria-bootstrap-slider/dist/bootstrap-slider.min.js and seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css too.

Also, looking at the code, I'm not sure it works without jQuery, like the original plugin is supposed to. It would really be a plus, since most angular modules for UI still require it...

When I use a simple slider I can externally (another input or in controller) change the ng-model value of the slider, and the slider slides accordingly. This does not work for a range slider.

See example:

Range Slider (binds only one way)
<slider
    ng-model="exampleModel"
    value="exampleModel"
    min="0"
    step="1"
    max="10"
    range="true"
></slider>

Min:
<input
    type="number"
    min="0"
    max="10"
    step="1"
    ng-model="exampleModel[0]"
/>
Max:
<input
    type="number"
    min="0"
    max="10"
    step="1"
    ng-model="exampleModel[1]"
/>

Min Slider(works)
<slider
    ng-model="exampleModel[0]"
    value="exampleModel[0]"
    min="0"
    step="1"
    max="10"
></slider>

There should be two way binding on the model.

Trying to use slider as attribute:

<span slider ng-model="sliders.secondSliderValue" min="0"></span>

The result is code wrapped in <div>, not <span>:

<div slider="" ng-model="sliders.secondSliderValue" min="0" class="ng-isolate-scope ng-valid">
    <div class="slider slider-horizontal" id="" style="width: 100%;"> ... </div>
    <input class="slider-input" type="text" style="width: 100%; display: none;" data-value="0" value="0"> 
</div>

Hello guys

In jquery i used this method priceArray = mySlider.refresh();
and it working fine but but in angular i have ng-model="multipleDemo.sliderValue" so i try to empty this model with ng-click event $scope.multipleDemo.sliderValue = {}; But it throw some error...

I am using the following code when creating this slider as an element.

< slider id="uniqueID" ng-model="value" value="yearMin" min="1" step="1" max="10" ng-change="myfunction(value)" >
< /slider >

When I include tooltip="hide" as one of the html attributes, I am getting the following error: https://docs.angularjs.org/error/$compile/multidir?p0=slider&p1=tooltip&p2=new%2Fisolated%20scope&p3=%3Cdiv%20tooltip%3D%22hide%22%20id%3D%22yearSlider%7B%7Bdhmsmdeploymentmaptools.containerClass%7D%7D%22%20ng-model%3D%22yearValue%22%20value%3D%22yearMin%22%20min%3D%22yearMin%22%20step%3D%22hop%22%20max%3D%22yearMax%22%20ng-change%3D%22broadcastControl(%27updateYear%27,%20yearValue)%22%3E

Is there a different way I should be setting the tooltip hide/show value?

Hi,

Thanks for working on this directive.

Could you tell me if the formatter is working and if so how? I want to adjust the texts in the tooltips and judging from the documentation of the bootstrap slider project the formatter is the thing i should be using.

Please tell me how to apply the formatter in the context of this angular implementation.

Best,

Dirk

precision is not working inside tooltip? what for precision is used? how to control the precision inside tooltip.

Hello,

I need to use boostreap-slider v4 to avoid #13 in a project using Angular and NOT using jQuery, however I get the following exception

ReferenceError: $ is not defined
at link (http://localhost:3000/vendor/angular-bootstrap-slider/slider.js:9:5)

using bootstrap-slider-4.0.1

Any idea?

I recently upgraded to v 0.1.17 and noticed that the new value from the slider is never passed in?

on-start-slide="onSlideHandler(value, $event)"

When I debug it hits the handler but value is the same everytime and $event is undefined?

When using a range slider, I want to get which, either start or end has changed. I'm trying to bind events or use a $watch but it's getting buggy to know which is the one being changed:

Using a $watch this is what I try:

$scope.$watch('rangeSlider.value', function (newValue,oldValue) {
    var changed = newValue[0] === oldValue[0] ? newValue[1] : newValue[0];
            ....
            ....
});

But as I say, it's not reliable. Would you suggest any alternative?

It would be nice to be able to set the 'formater' option of the bootstrap-slider.

I tryed to do it myself but couldn't find a proper way to set a function in the attributes of the <slider> element.

In the slider for bootstrap examples (http://seiyria.github.io/bootstrap-slider/), they color the low/high tracks and selections with the following CSS. However, this is the markup that is rendered when using this directive, where there is no slider-track-low and slider-track-high?

<div class="slider-track">
  <div class="slider-selection" style="left: 35%; width: 30%;"></div>
  <div class="slider-handle round" style="left: 35%;"></div>
  <div class="slider-handle round" style="left: 65%;"></div>
</div>


#slider12a .slider-track-high, #slider12c .slider-track-high {
  background: green;
}

#slider12b .slider-track-low, #slider12c .slider-track-low {
   background: red;
}

#slider12c .slider-selection {
   background: yellow;
}

It is not possible to set the step-size of the slider higher than 20 as the Number.toFixed(num, precision) method will raise an exception when precision is greater than 20.

When attempting to set the tooltip-position to bottom, there is no change to the position of the tooltip.

Angular binding via ng-model only works one way. If I move the slider, my scope variable is changed accordingly. The binding from the UI to the script works. However, if I change the value of the scope variable, the slider does not change.

In fact, I am unable to set an initial value per the doc in the "slider" directive. e.g. value="7". I did find that if data-slider-value="7" does work to set the initial value. It does not, however, make the Angular binding work.

If you have a formatter on one slider, it does not get rendered anymore, but instead you see the function contents!
Regression identified, I create a fix that I tested on my side...

For example : I have a slider with ng-model="foo", if I set $scope.foo = 0 somewhere, it should trigger slider.slider('setValue', 0), but it doesn't because of a test :

$scope.$watch(attrs.ngModel, function(value) {
if(value) {
slider.slider('setValue', value, false);
}
});

(not sure of the purpose of the test)

Hi.

Just updated to version 0.1.17, and even though setting my slider value as an array:

<slider ng-model="range" step="1" min="1" max="10" value="[1, 10]"></slider>

...I don't get a range slider.

Is it me or the update?

I want to save my model after a selection is made. Now i have to do it on change, but than it updates too often. On blur would be enough.

Hi all,
one of my need with Angular Bootstrap Slider is have a custom Tooltip.
Formatter works fine but it take only text plain, i'm not able to use an HTML tag or insert a bind of a value in $scope {{}}.
It is possible render HTML code inside Tooltip via formatter attribute?

Hi,

is there a way to disable / enable the slider (read only) via scope variable?

Thank's
Avi

The page that contain the slider doesn't render right the labels, as in the attached picture.
But when i select another value on the slider the labels was rendered right.
How could i fix this behaviour?
Could I refresh the slider by my controller?

Help? please =)

Hi,

I updated for the last version to have the correction of the 2 way data binding, but i got an exception:

RangeError: toFixed() digits argument must be between 0 and 20
    at Number.toFixed (native)
    at Slider._applyToFixedAndParseFloat (http://localhost:3000/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:1305:28)
    at Slider._applyPrecision (http://localhost:3000/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:1297:17)
    at Slider.setValue (http://localhost:3000/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:732:30)
    at createNewSlider (http://localhost:3000/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:614:9)
    at new Slider (http://localhost:3000/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:301:20)
    at HTMLInputElement.<anonymous> (http://localhost:3000/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:152:25)
    at http://localhost:3000/bower_components/jquery/dist/jquery.js:144:20
    at Function.jQuery.extend.map (http://localhost:3000/bower_components/jquery/dist/jquery.js:467:13)
    at jQuery.fn.jQuery.map (http://localhost:3000/bower_components/jquery/dist/jquery.js:143:33)

Here is the markup:

 <slider ng-model="range.value" range="true" step="range.step" min="range.min" max="range.max" tooltip_split="true"></slider>

And here is the controller:

 $scope.range = {
        min: 10000,
        max: 1000000,
        step: 10000,
        value: []
      };
      $scope.delayedMin = parseInt($scope.allFilters.priceMin, 10);
      $scope.delayedMax = parseInt($scope.allFilters.priceMax, 10);
      $scope.range.value = [$scope.delayedMin,$scope.delayedMax] ;

The attributes with camel case (i.e. attrs.tooltipSeparator, attrs.tooltipSplit, etc) need to be all lowercase, as they're not currently matching and setting the options correctly. Also "attrs.formater" is spelled incorrectly/inconsistently from the bootstrap-slider API.

Submitted pull request for you to merge if accepted...

Hi,

I'm trying to implement a autoplay function and trying to change the slider when "slider value" changes.

$scope.test = function () {
            setInterval(function () {
                $scope.slider.value += 1;
                console.log('Count : ' + $scope.slider.value);
            }, 1000);
        };

when i try this, it's not moving my slider according to the slider value.

I use v.1.1.1, and have such construction:

<div slider ng-model="calcData.periodMonth" min="periodMonth.min" max="periodMonth.max" on-stop-slide="updateProducts()"></div>

But now it seems broken.
How could I fix this?

Even events example from test.html is not working now.

Hi,

I'm trying to use this durective in my application, but no way.
I always have an "no such method 'setValue' for slider widget instance" Error, and my DOM is not like the one in your test page :

<div slider-id="mySlider" ng-model="slider.sliderValue" value="10" min="5" max="100" step="5" range="false" precision="2" reversed="false" orientation="horizontal" handle="round" enabled="true" ng-disabled="false" naturalarrowkeys="false" class="ng-isolate-scope ng-valid">
  <input class="slider-input ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" type="text" aria-disabled="false"></input>
</div>

Has someone an idea on my trouble ?

This line has the watcher for ngDisabled since it's looking at $scope.$parent. For me, having the watcher on $scope works fine. Am I missing something?

I'm using AngularJS 1.3.16 and angular-bootstrap-slider 0.1.3.

UI and model are out of sync using the change event, because change event is not invoked on the UI, only the model is adapted.
I can see the reason why this is done, because following the bootstrap slider documentation and implementing 'change/onchange' event handler, it generates a warning.

I have resolved this locally by renaming the change event handler onchangeslide.

Now when you click on the slider line (VS dragging the slider handles), which is a common thing to do for a user, both the model and view are updated, as expected.

I will make a pull request for this, also i will change the readme to accommodate the event handlers, if you don't mind?

Which notation of event handlers is preferred? on 'onslide' or 'on-slide' ?

Hello,

bower.json has version 0.0.6 but version 0.1.1 is out.

Can you update it please? thanks!

Click on slider doesn't set the value in model. Only when we slide the slider that time the value is set. Can you please help me with the solution ?

Not sure why this is coming up all of a sudden. Did something change in the latest version?

Tried to use this slider on Angular as you sugges on this page:

<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value"></slider>

But, mine differ a little bit, I need to have labels so, using options from Bootstrap Slider, like this: data-slider-ticks-labels="['$0', '$100', '$200', '$300', '$400']", but this does not work properly...

In my case I have tried:

<slider ng-model="stuff" ng-click="doSomething('value')" min="0" step="0.5" max="5" slider-ticks-labels="['0', '0.5', '1.0', '1.5', '2.0', '2.5', '3.0', '3.5', '4.0', '4.5', '5.0']"></slider>

<slider ng-model="stuff" ng-click="doSomething('value')" min="0" step="0.5" max="5" ticks-labels="['0', '0.5', '1.0', '1.5', '2.0', '2.5', '3.0', '3.5', '4.0', '4.5', '5.0']"></slider>

None of the above works, and the slider stays like this:

I am also getting this issue. It seems related with recent updates? It was working fine before.

Hi,

Model is not updated for clickable event it only supports slide event.

When i am clicking on slider the event is not triggered.

Please help me for this.

Regards,
Hemant

Can the nuget package depend on the 'bootstrap' instead of the 'Twitter.boostrap' ?

As I give scale values in array, it takes the array length for positioning, and array values as label. It may be an issue or enhancement, we need to give value and custom label in the array as an object, and we may use that value for positioning the label

Ex:- SCALE - [{val:5, label:"low"}, {val:10, label:"medium"}, {val:15, label:"high"}]

TypeError: Cannot read property 'prototype' of undefined
at initSlider (http://127.0.0.1:8000/static/js/angular-bootstrap-slider.js:100:48)
at link (http://127.0.0.1:8000/static/js/angular-bootstrap-slider.js:24:17)
at http://127.0.0.1:8000/static/js/angular.js:58:446
at E (http://127.0.0.1:8000/static/js/angular.js:49:345)
at f (http://127.0.0.1:8000/static/js/angular.js:42:399)
at f (http://127.0.0.1:8000/static/js/angular.js:42:416)
at f (http://127.0.0.1:8000/static/js/angular.js:42:416)
at f (http://127.0.0.1:8000/static/js/angular.js:42:416)
at f (http://127.0.0.1:8000/static/js/angular.js:42:416)
at f (http://127.0.0.1:8000/static/js/angular.js:42:416)

Attributes tooltip_split and tooltip_position set on the slider element should work like defined in https://github.com/seiyria/bootstrap-slider#options

I just want to let you know that the version bower installs (0.0.8) is not the same as the one here on github.

bootstrap-slider.css sets .slider .slider-horizontal width to 210px.
The width is overriden to 100% in the template.

I am getting problem while using this slider with require js.
plz see stack link

http://stackoverflow.com/questions/29226049/angular-based-bootstrap-slider-does-not-work-with-require-js

I tried listening to 'slideStop' event and it was called twice because of this:

$.fn.slider.Constructor.prototype.enable = function () {
    if (this.touchCapable) {
        // Touch: Bind touch events:
        this.picker.on({
            touchstart: $.proxy(this.mousedown, this)
        });
    } else {
        this.picker.on({
            mousedown: $.proxy(this.mousedown, this)
        });
    }
}

On bootstrap slider 3.0 this is already handled.

I would like to hide tooltips on my slider.

So, I use the "tooltip" option that I set to "hide".

The result is, cause of an other angular directive for my tooltips, that I've got a global "hide" tooltip on my slider.

Nice isn't it ;-)

What about that ?

I can see one easy solution :

• have an alias to the "tooltip" attribute, like "slider-tooltip" (easy, I can make a PR)

What do you think about it ?

What version of bootstrap-slider does this correlate to.

It seems like this is completely broken with the new version v4.8.1.

Firstly I get an error on line 101 saying that constrructor doesnt exist. I can fix that by making it lowercase constructor.

Then I get an issue with _applyToFixedAndParseFloat in bootstrap-slider, I think because I am using it as a range and sometimes the num getting passed in is an array from the looks of it. so toFixed doesn't exist as a function.

Can you recommend a version of bootstrap slider that this will work with or help me with what needs changing (even if its vague)?

Cheers