FR: Add Duration Slider to Sidebar Filters

[Gykes]

This PR allows the user to use a customizable slider to filter by duration similar to PH.

Currently there are 5 presets as shown in the screenshot below. I have set the current max to 2 hours but this can be modified if we feel like it needs to be higher. Just a reminder, the higher on the max we go the "longer" the slider becomes. Makes it harder for users to make smaller adjustments using the slider.

The users can modify the time in 3 ways:

1. use the slider to set their desired time up to a max of 2 hours
2. edit the number fields in various ways that I will describe below
3. use the filter presets

You type	Interpreted as	Displays as
10	10 minutes	10:00
5:30	5 min 30 sec	5:30
1:00:00	1 hour	1:00:00
90	90 minutes	1:30:00
max	2 hours+	max

As you can see there are various ways for the user to set their desired time.

Closes: #6263

UI:

[feederbox826]

IMO the presets should be a bit wider range, will try to run a sample in stash for it 🤔

[WithoutPants]

Testing notes:

• max should be replaced with the maximum range suffixed with +. ie if max range is 2 hours, it should be 2+ hrs or something
• the slider needs a debounce before updating the filter
• I do wonder whether we need 1 minute steps for the entire range. It seems like overkill.
• slider doesn't update when the criterion is removed via the x in the filter tag
• I think the styling on the min range marker could be better. It should probably just be styled in the same way as the max range marker

Pornhub uses 10 minute steps, up to a maximum of 40+ minutes. I think a max range of 2+ hours is good, but I think the steps could be better. Trying to set 0 - 2 minute range is pretty fiddly.

Having steps of 0, 2 minute, 5 minute, then 5 minute intervals is what I propose, but I'm happy to discuss it. It means that the steps won't be completely one-to-one given that first 2 minute step.

[Gykes]

1. max should be replaced with the maximum range suffixed with +. ie if max range is 2 hours, it should be 2+ hrs or something

• Fixed by making the max now say 2+ hrs

2. the slider needs a debounce before updating the filter

• I set it to 300ms

3. I do wonder whether we need 1 minute steps for the entire range. It seems like overkill.

• I changed the steps like you recommend 0,2,5

4. slider doesn't update when the criterion is removed via the x in the filter tag

• Fixed, added a useEffect hook to watch and reset when needed

5. think the styling on the min range marker could be better. It should probably just be styled in the same way as the max range marker

• I updated the styling to match more. However, and correct me if i'm wrong, there is a limitation on dual range sliders as the min and max need to be on seperate Z-Axis to function properly. This means that one is always going to appear lighter/further in the background. I also dont have much experience with CSS so perhaps someone with more knowledge can fix it up.

[feederbox826]

limitation on dual range sliders

IMO the end one should be on the higher Z index (front)

[Gykes]

limitation on dual range sliders

IMO the end one should be on the higher Z index (front)

Yea, the end is 3 and min is 1 iirc

[WithoutPants]

Very nice work. I managed to make the max slider track transparent so that the min thumb is more visible:

I also added left/right align to the min and max text inputs.

I separated out the slider control into a reusable component so that it can be reused in other things. Please update #6267 once this is merged to use the new component.

Finally, I changed the debounce implementation to use our specialised useDebounce hook.

[feederbox826]

having a look now

[feederbox826]

Not many scenes to test with, but one UX request would be make the un-selected range greyed out compared to the selected range being in blue

[WithoutPants]

Not many scenes to test with, but one UX request would be make the un-selected range greyed out compared to the selected range being in blue

Fair point. We would have to do away with using range inputs entirely to implement this though, as far as I can determine (Pornhub appear to do this with div, span and some styling). A simpler - albeit workaround - solution may be to make the slider track a more neutral colour instead of the primary blue color.