Create Range Slider Component

[sohamsshah]

Is your feature request related to a problem? Please describe.

According to the new design update, we are aiming to develop an updated version for Slider Component.
Currently our slider component looks something like:

Describe the solution you'd like.

We want to create new component like this (with tailwind css):

Describe alternatives you've considered

The current slider component lies in flint.ui/src/components/Sliders. The new Slider Component should be added in this folder (no need to delete other component files.) Test this by updating the views on /flint/configurations/point etc. routes to ensure working of the component.

Additional context.

Make sure the component:

• Uses Tailwind CSS utility classes (feel free to update tailwind.config.js file to extend new theme if needed(
• Is accessible and without any logical errors
• Thoroughly tested on different routes where the older Slider Component was used

Feel Free to ask questions or curiosities around its implementation.

[anjali1102]

Kindly assign me

[shloka-gupta]

Go ahead, @anjali1102 !

[sohamsshah]

Hey @anjali1102 , Do you have any progress on this? If timing is bad for you, maybe I should un-assign you so someone else can take this?

[anjali1102]

hi @sohamsshah
I did these changes

I am unable to see any changes on my localhost or http://127.0.0.1:8000/flint/configurations/point

I set up by following Development notes in readme here

[sohamsshah]

Hi @anjali1102 , are you working on this? If it is not a good time for you at the moment, please feel free to let us know 😊

[yashsehgal]

Hey @Chicken-Biryani @sohamsshah I would like to work on this issue if no one's working on it. 😄

[sohamsshah]

@yashsehgal , sure go ahead! I would suggest first lets brainstorm a bit on what props can be added for our implementation of Range Slider component. We can refer some popular design systems to decide the component Design.

[yashsehgal]

Yeah sure @sohamsshah I will create and share a list of features we can add to this component, according to our requirements.

[shloka-gupta]

@sohamsshah @yashsehgal

Could we replace the range slider with text boxes?

Because-

1. The range slider limits the users. To give the range from 0 to 400. Whereas the value of the pools can go way beyond.

2. Precicion is not met with range slider. A lot of times the value of pools are in float/decimal values.

Just a thought. I think putting a text box would be better.

Or maybe we could keep the range slider and put a text box below that.

Cc: @shubhamkarande13

[yashsehgal]

@sohamsshah @yashsehgal

Could we replace the range slider with text boxes?

Because-

1. The range slider limits the users. To give the range from 0 to 400. Whereas the value of the pools can go way beyond.

2. Precicion is not met with range slider. A lot of times the value of pools are in float/decimal values.

Just a thought. I think putting a text box would be better.

Or maybe we could keep the range slider and put a text box below that.

Cc: @shubhamkarande13

Great idea. What we do is create a component wrapper with 2 radio based options (custom and range) so that by default users can set a range value, if they want custom then after selecting the custom radio button an input box will appear.

If this sounds to be a good approach, I can start designing it.

[sohamsshah]

@sohamsshah @yashsehgal
Could we replace the range slider with text boxes?
Because-

1. The range slider limits the users. To give the range from 0 to 400. Whereas the value of the pools can go way beyond.
2. Precicion is not met with range slider. A lot of times the value of pools are in float/decimal values.

Just a thought. I think putting a text box would be better.
Or maybe we could keep the range slider and put a text box below that.
Cc: @shubhamkarande13

Great idea. What we do is create a component wrapper with 2 radio based options (custom and range) so that by default users can set a range value, if they want custom then after selecting the custom radio button an input box will appear.

If this sounds to be a good approach, I can start designing it.

This sounds good.

Though, we can design the RangeSlider component that accepts props which manage with props such as:

• customRange - [x,y] (Array of x and y shows that the slider should range from x to y value)
• precisionValue - 0.1 or 0.01 and so on to show the selection precision
• step: how many units are stepped on sliding (as a similar alternative to precisionValue)
• onChange: runs a callback function when change is detected in range slider component (optional)

Personally, I find the RangeSlider props of chakra-ui design system very well defined and can definitely take inspiration from it.

[shloka-gupta]

@yashsehgal @sohamsshah

The problem is that... it limits the user.

The values can go way beyond (negative and positive).....

I don't know whether having a range slider is useful, eventually.

But okay let's go with Soham's idea.

[sohamsshah]

@yashsehgal @sohamsshah

The problem is that... it limits the user.

The values can go way beyond (negative and positive).....

I don't know whether having a range slider is useful. 😬

If that is the case, then it would be better to take help from designer for the final UI for the requested component. Once it is confirmed, then only it would make sense to actually write code for the component.

[yashsehgal]

Correct 💯
Got your points @Chicken-Biryani @sohamsshah
I will be working on the component designing part of it and will update you soon. 👍🏽

[yashsehgal]

I have created a concept wireframe of this component.

• We can have 2 radio buttons to select what kind of values user want to add.
• Slider component can be taken from Chakra UI, as it already have a set of pre-developed logics.
• Input boxes can be added in the Set custom duration option.

This is how the design is looking, you can also check it on figma here

With proper state management

[yashsehgal]

Hey @Chicken-Biryani @sohamsshah
Can I continue with the UI component design above and also, are there any changes required?

[sohamsshah]

Hey @yashsehgal , this seems great. Sure, please raise a PR for this component, it would be great!

[yashsehgal]

Hey @sohamsshah
Sorry for taking so much time on this, but here's a small prototype of this component that I have development code-sandbox

https://codesandbox.io/s/elated-dawn-hhdmz?file=/src/App.vue

If it looks good to you, I can start implementing this feature into our codebase.

Tools I have used: ChakraUI for Vue

Here's some SS of the current component design

• Slider type input
  

• Custom input
  

[sohamsshah]

Hey @sohamsshah Sorry for taking so much time on this, but here's a small prototype of this component that I have development code-sandbox

https://codesandbox.io/s/elated-dawn-hhdmz?file=/src/App.vue

If it looks good to you, I can start implementing this feature into our codebase.

Tools I have used: ChakraUI for Vue

Here's some SS of the current component design

• Slider type input
  
• Custom input
  

Hey @yashsehgal , I see that you have used Chakra-UI Vue for this. The implementation looks good but I feel that the decision about the design system is still awaiting (See comments here #136 ) Once it is finalized, we can move forward with this.

[Palaksharma23]

@sohamsshah i would like to work on this issue :)

[shloka-gupta]

Hi, @Palaksharma23 we have a new issue with similar instructions but I believe revolving around what we require lately.

I'll close this one.