UX Design for a range slider which is optional

Question

I have a range slider field (to select age range) which is an optional field. I'm trying to make the UX as smooth as possible but there are a few things that I'm super confused about.

1. As this is an optional field, what should the default state of the slider look like? They currently rest at 0, but this confuses a lot of users and makes them think that the range slider is active at with 0 values when in reality it's not.

2. If a user accidentally selects a range for the slider but later wants to remove the slider values, what state should it fall back to? Should there be a reset button next to the slider?

Answer 1

You don't need a range slider. Don't make them fiddle with controls, when a single input will do the job.

Sliders can be problematic UI elements, as Nielsen Norman group has studied:

Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element.

The wider or the denser the range selectable through a slider, the harder it is to select a precise value.

If a single value is good enough, just put an input field with an indicator that it's optional, and they can just delete the value if they change their mind.

Update: If you must work with canned ranges because of product requirements for data collection

If you're using discreet age brackets (i'm assuming for marketing and product data), then a range slider makes things even harder for the user, because they have to decide 'what range am I in?' and fiddle with the controls themselves.

Try radio buttons or a dropdown instead: