Change scale of Cloud pricing calculator

[corywatilo]

The pricing calculator should start at zero, but only allow the slider to go down to the free allotment. This will help users visually see and understand what the free allotment on the products is.

[Narcos101]

@corywatilo is this issue still open. Would love to take a shot at it!

[raquelmsmith]

The design of the page has been updated and the current sliders start at the correct increments so this issue is no longer relevant. However, I do think that it would be better if the scales started at 0 but couldn't go below the free volume so that it's more visually apparent that we offer free volume as part of the paid plan, if you'd like to take a stab at that.

[Narcos101]

Hey @raquelmsmith i am not sure whether your comment above was mentioned to cory or me. But, are you suggesting that the scales should start at the correct increments but the portion from 0 - 1M should be visible but not functional to slide on it? Or am i getting it completely wrong?

[raquelmsmith]

are you suggesting that the scales should start at the correct increments but the portion from 0 - 1M should be visible but not functional to slide on it

@Narcos101 correct!

[Narcos101]

That's a great idea @raquelmsmith . Hope you can get permissions for it and make a good first issue, so i can contribute to it :p.

[raquelmsmith]

No need for permission :) I updated the issue description here, feel free to go for it.

[Narcos101]

Hey @raquelmsmith , I am still confused with the updated description. My idea above was based on the price calculator starting at 1M and is able to slide upto 1b events same as shown in the image but including a portion from 0-1M attached to it which isn't slidable at all and is just for visibility purposes for our user.

[raquelmsmith]

Yes that's correct. Can you explain what you're confused about?

[chidexebere]

Hi @raquelmsmith,

Going through this issue, I was able to make the pricing calculator appear visually like so but this did not meet all the requirements stated in the issue.

Requirement achieved.

• The page loads the pricing calculator like above and the slider can not go below the free allotment
• A user can only slide above the free allotment and the calculated price will be displayed

Requirement not achieved.

• The pricing calculator should start at zero

The pricing calculator can not start at zero because of the implementation of rc-slider in the LogSlider.tsx component.
The short explanation to this is Math.log(0) = -Infinity and this can not be displayed on the pricing calculator.
You will get a better understanding when you look through the LogSlider.tsx component.

Proposition

• Change the LogSlider.tsx implementation of rc-slider. Since the LogSlider.tsx component is not only used on the pricing page, this decision will have to be made by the core team. The current implementation is based on this.

• Use another flexible slider that is not rc-slider. This decision will have to be made also by the core team.

[raquelmsmith]

@chidexebere awesome! Did you push up your code? Not seeing it linked here.

[chidexebere]

@raquelmsmith I did not push my code since what I did was not fully what was required.
I wanted the core team members to make inputs or give a go ahead for the push.

Should I push my code?

[raquelmsmith]

Yes please! Easier to comment on code 🙂