Slide limit based on another slider value

[haurs]

Hi, I'm trying set a limit on a second slider (car_loan_excess) based on the current value of another slider (car_loan_amount). I don't want the second slider to extend above the main slider value. I tried using the MaxLimit but that didn't do anything (maxLimit: car_loan_amount), so I'm not sure if this is possible. Any suggestions?

$scope.car_loan_amount = {
    minValue: 25000,
    options: {
      floor: 500,
      ceil: 50000,
      step: 500,
      precision: 0,
      draggableRange: false,
      showSelectionBar: false,
      hideLimitLabels: false,
      readOnly: false,
      disabled: false,
      showTicks: false,
      showTicksValues: false
    }
  };
  $scope.car_loan_excess = {
    minValue: 0,
    options: {
      floor: 0,
      ceil: 50000,
      step: 500,
      precision: 0,
      maxLimit: car_loan_amount,
      draggableRange: false,
      showSelectionBar: false,
      hideLimitLabels: false,
      readOnly: false,
      disabled: false,
      showTicks: false,
      showTicksValues: false
    }
  };

[ValentinH]

You should set maxLimit to $scope.car_loan_amount.minValue

[haurs]

Thanks Valentin. I figured I had an older version of the repo, so had to update to get this working.

But I can't get it working exactly as I want. It works up till the minValue I have set inside car_loan_amount, but the maxLimit does't adjust itself when you adjust the slider on car_loan_amount.

Would be great if the maxLimit could update itself according to the slider value of $scope.car_loan_amount.minValue. Maybe I need a different approach?

In addition to this, I've been trying to add in a comma separated thousands, but somehow can't get that working correctly either. Doable?

[ValentinH]

Please provide a demo.

[haurs]

I tried to get this working, but somehow it wont show the slider: https://jsfiddle.net/n6wadxma/

[ValentinH]

You can try to start from this working demo if you prefer: http://jsfiddle.net/cwhgLcjv/

[haurs]

If you check this one, you'll see that price 2 is directly tied to the default value of price 1. I'm trying to make the maxLimit adjust according to the value of price 1 http://jsfiddle.net/cwhgLcjv/91/

[ValentinH]

The issue is the way you do it only set the value on the first run but won't update it later. You need to update it on each change so the onChange callback is what you need:
http://jsfiddle.net/h3bzu8fL/

[haurs]

Thanks a lot Valentin! Got it working now.

[haurs]

Hey I got a followup question: http://jsfiddle.net/b1en01sg/1/ Why can't I access the slide value below the slider - only by placing the code above. See the last Price 1.

[ValentinH]

It's because your code was outside the controller scope (in a new div), working example: http://jsfiddle.net/rh9u8xcd/