'If statement in rails view based on value returned from Stimulus Controller?

I have a range slider in my view, and based of the output value my stimulus controller returns of the slider I'm trying to do an if & else statement in my view where I wanna display different options based of the value.

For example if range-slider__value=<5 then I wanna display plan.title, plan.description and plan.monthly_price for Plan.find_by(id: 1), and if it's less then 5 I wanna show the same for Plan.find_by(id: 2). And then I want to be able to checkout that selected Plan.

My view:

<div class="range-slider" data-controller="range-slider">
  <input type="range"
    name="customRange"
    class="range-slider__range"
    data-target="range-slider.range"
    data-action="input->range-slider#updateValue"
    value="6"
    min="0"
    max="10"
    step="0.5">
  <output class="range-slider__value" data-target="range-slider.value">
  </output>
</div>

My stimulus controller:

export default class extends Controller {
  static get targets() {
    return ['range', 'value', 'rangeFrom', 'rangeTo', 'valueFrom', 'valueTo']
  }
  
  connect() {
    if (this.hasValueTarget)     { this.valueTarget.innerHTML = this.rangeTarget.value }
    if (this.hasValueToTarget)   { this.valueToTarget.innerHTML = this.rangeToTarget.value }
    if (this.hasValueFromTarget) { this.valueFromTarget.innerHTML = this.rangeFromTarget.value }
  }
  
  updateValue(evt) {
    this.valueTarget.innerHTML = evt.currentTarget.value;
  }
  
  updateFromValue() {
    let fromValue = this.rangeFromTarget.value
    let toValue = this.rangeToTarget.value
    
    if (fromValue >= toValue) {
      this.rangeToTarget.value = fromValue
      this.valueToTarget.innerHTML = fromValue
    }
    
    this.valueFromTarget.innerHTML = fromValue
  }
  
  updateToValue() {
    let fromValue = this.rangeFromTarget.value
    let toValue = this.rangeToTarget.value
    
    if (toValue <= fromValue) {
      this.rangeFromTarget.value = toValue
      this.valueFromTarget.innerHTML = toValue
    }
    this.valueToTarget.innerHTML = toValue
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source