But wouldn't that approach will have interaction issues? I mean if I try
that, the value on slider will be different from the input fields.(not data
binding on regular intervals, 3 to 12). The slider will be working on some
value and input to some other.
I'm not able to approach the binding of this value. I tried to create
separate models for slider and fields but then the navigation of slider
doesnt change the value on input field, meaning the data binding is not
working:
myApp.controller('myCtrl', function($scope) {
$scope.months = 3;
$scope.sliderMonths = 3;
$scope.minVal = 3;
if($scope.months == 1 || $scope.months == 2){
$scope.sliderMonths = 3;
}
else{
$scope.sliderMonths = parseInt($scope.months);
}
});
This approach is not making the slider to change the value of input fields
even though the values within the range. Any help please?
On Friday, January 31, 2014 1:34:00 PM UTC-8, tonypee wrote:
>
> Sounds like you might want to have 2 numbers in flight, and logic to
> manage them. You will want to bind one value to the slider, one to the
> input. Then you can watch the values ($scope.$watch) and manually
> manipulate them as needed.
>
> This way, your slider can represent a number which is not what is present
> in the input.
>
>
>
>
> On 31 January 2014 13:26, Srikar Shastry <[email protected]<javascript:>
> > wrote:
>
>> @Sander and James,
>> Thank you for your responses but its not working.
>> You see even if its type text or type number, when user manually enters
>> the number 1, the slider goes off its track. Now, according to angular,
>> thats normal because input field and slider share the same model.
>> What I want is to break the connection (data binding between input field
>> and slider) when the value entered on input field is 1 or 2, keeping the
>> slider at minimum 3. That way, on blur, the value on input goes back to 3
>> and that when that happens, the connection (data binding) is restored. That
>> jiggering of slider is not to happen. Any help on breaking the data binding
>> please?
>>
>>
>>
>> On Wednesday, January 22, 2014 4:13:51 PM UTC-8, Srikar Shastry wrote:
>>>
>>> Hello,
>>> I'm in a bit of a pickle.
>>>
>>> I have an input box and a slider (i'm using this slider ui:
>>> http://prajwalkman.github.io/angular-slider/ or https://github.com/
>>> prajwalkman/angular-slider).
>>>
>>> The input box should only accept numbers and when it goes below 3, the
>>> value should change back to 3 on ng-blur (not on ng-change, meaning user
>>> can still type 1 and 2. It has to be like this because if I use ng-change,
>>> it restricts me type 1 or 2 hence, I cant type 10 or 20, etc.). Now, the
>>> slider and input box share the same ng-model (two way data binding) making
>>> the user to see what value of slider and vice versa. If a user type a
>>> number in the input box, the slider is adjusted provided the above
>>> condition meets.
>>>
>>> Now, the issue I'm running into an issue, I'm not able to make the input
>>> box value value based on the slider.
>>>
>>> *Here is the example:*
>>>
>>> http://plnkr.co/edit/6nZrECAxxRORuKWmLZ1R?p=preview
>>>
>>>
>>> The condition should still meet keeping the slider restricted between 3
>>> and 12. How can I achieve that? Any help is appreciated.
>>>
>>> Regards,
>>> Srikar
>>>
>>> --
>> You received this message because you are subscribed to the Google Groups
>> "AngularJS" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected] <javascript:>.
>> To post to this group, send email to [email protected]<javascript:>
>> .
>> Visit this group at http://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>
>
>
> --
> Tony Polinelli
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
