Add Polaris Range Slider to Checkout UI

[tomokendo]

Component name

Range Slider

Component description

Range Slider allow users to select a value along a subjective range.

I am aware it is already in Polaris (https://polaris.shopify.com/components/selection-and-input/range-slider) but we would like to add the identical component to checkout ui extensions.

This would allow engineers to provide a start and end numeric value and increment as an alternative to the stepper component as a faster UI paradigm for scenarios where we want to dynamically allow a number to be selected.

An example of a use case would be cashing in loyalty points where a user only has a min/max amount of loyalty points they can apply to an order in a range of increments depending on the min/max amount specified.

Required components

No dependency required

Component example

See: https://polaris.shopify.com/components/selection-and-input/range-slider

Props

See props here: https://polaris.shopify.com/components/selection-and-input/range-slider

Best practices

As already exist for the polaris component but for checkout-ui extensions

Content guidelines

No response

Related components

No response