'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 |
|---|
