Color maps range slider implementation

[snmln]

Related Ticket: #1102

Description of Changes

Creation and implementation of new range slider component.

Notes & Questions About Changes

-There is a identified bug that while dragging the slider thumbs you can drag the entire panel up and down influencing the parent component position.
-Additional functionality: If input field is left empty and clicked outside of the default min or max should auto populate the field.

Validation / Testing

Navigate to a data exploration and add a layer to the timeline.

• Layers:
  • Confirm that min and max are accurate to value in the layer legend view.
  • Switch to another layer with different value confirm that the min and max in the range slider are accurate.
  • Select a layer with a min value less than 0 (net ecosystem exchange) you should see a middle marker that represents the center of the current gradient values.
• Slider:
  • You should not be able to drag the min slider past the max slider, or the max slider past the min slider.
• Text Inputs:
  • You should be able to type in a value greater or lower than the min max of the layer but then be shown with the error message Please enter a value between {min} and {max} no change to the slider range or the map.
  • After selecting a different max that is less than the layers absolute maximum with either slider or input, if you enter in a value in the min text input that is greater than the newly selected max you should be presented with an error message Please enter a value less than {max}
  • After selecting a different min that is larger than the layers absolute minimum with either slider or input, if you enter in a value in the max text input that is greater than the newly selected max you should be presented with an error message Please enter a value larger than {min}

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	fa9a363
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/671174f57bfef700083fe9cf
😎 Deploy Preview	https://deploy-preview-1190--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dzole0311]

Nice work @snmln! I left a couple of comments below

[dzole0311]

@snmln Sorry, one more small nit: if we remove the min val from the input and then click outside of the input, could we revert back / show the default value instead of leaving the min input empty?

[snmln]

@snmln Sorry, one more small nit: if we remove the min val from the input and then click outside of the input, could we revert back / show the default value instead of leaving the min input empty?

As of right now that is the functionality on refresh. That shouldn't be hard to implement when the interface closes.