Question posted in 
So currently I have a UI slider that is changing data on a price-list form as the value changes, the problem I can’t seem to figure out is how to grey out one or more of these boxes if a certain value hits.
I attached an image to explain what I want to achieve when 1 user is selected on the slider and what I want it to show if 2-4 users are selected on the UI slider. Any help would be greatly appreciated I really am struggling with this.
I made in photoshop to explain better what I hope to achieve, I removed the code I tried with because it wasn’t working and not sure if I was going at it the right way, any help I would be grateful for as I am really hitting my head against the wall here.
I need to grey out the following div box when the slider moves
<div class="pricing-item">
<div class="pricing-item-inner">
<div class="pricing-item-content">
<div class="pricing-item-header">
<div class="pricing-item-title">Advanced</div>
<div
class="pricing-item-price"
data-price-output='{
"0": ["$", "13", "/m"],
"1": ["$", "17", "/m"],
"2": ["$", "21", "/m"],
"3": ["$", "25", "/m"],
"4": ["$", "42", "/m"]
}'
>
<span class="pricing-item-price-currency"></span>
<span class="pricing-item-price-amount"></span>
<span class="pricing-item-price-after"></span>
</div>
</div>
<div class="pricing-item-features">
<ul class="pricing-item-features-list">
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
<li class="is-checked">Excepteur sint occaecat</li>
</ul>
</div>
</div>
<div class="pricing-item-cta">
<a class="button" href="#">Buy Now</a>
</div>
</div>
</div>
Here is the link to codepen for the code: https://codepen.io/daniel-smit/pen/ZEQELRa
Any help really would be appreciated.
2
Answers
To make it work in the way you want, you have to create an overlay
<div>withposition:absoluteinside eachpricing-itemtag element along with some other styles to position it inside itspricing-itemparent, givepricing-itemposition relative, so that it will be position reference for the overlays. also add unique class for each of the threepricing-item, I give themleft,middleandrightclass, so that we can reference them based on the slider<range>input.and inside
handlePricingSlider()function I add this code:What this code do is first reset/remove the overlay
<div>on all element then check for the<range>input value, if the value is0it will gray-out left and right columns, if its1it will gray-out the right column, else the layout will be removed.Here is a snippet:
Here is the updated code:
https://codepen.io/tahabayi/pen/ExPaOKW
HTML (mask div should be added under each inner div, and mask div can be enhanced according to needs)
CSS
JS