FAQ: Learn HTML: Forms - Range Input

This community-built FAQ covers the “Range Input” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Range Input

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2 posts were split to a new topic: Is there a difference between 0.5 and .5 in a real application?

7 posts were split to a new topic: What are these new elements? (section, class, and hr)

2 posts were split to a new topic: Do we need to use both ID and name? Can they be the same?

6 posts were split to a new topic: How is the span element used?

It says that the value of the input element is changed.
Where can I see this value? Where is it sent?

What will be the default value for the step attribute in the input element if I don’t enter the step attribute at all? Also what are the default values for the max and min attributes?

When you set the max number, what does the number translate in terms of its output on screen? For example, if I set the max to 10, is it like 100 pixels away from the origin? Or is it just an arbitrary number?

While adding a range input, I was wondering if there’s a way to mark the value of gradations?


A bit unrelated but when I added a min and max to the amount of patties you can have the text displayed changed even though there was no actual text added. why is that?

What determines where the dot for a slider starts? In the example of the Volume and the exercise for “doneness” the dot starts out in the middle. Is there a way to make start on the left or right the range?

1 Like

I think we can adjust slider without step attribute 0.5, by giving the range 0 to 10 rather than 0 to 5 with step attribute 0.5. Both have same affect. Is there another use of step attribute?

1 Like

Hi Pulkitsinga i had the same question about the default value for the step attribute and after playing around it seems the step default is 1. Using attributes min=“0” max=“5” step=“0.5”
allows the range slider to select 10 positions in increments of 0.5, whilst this min=“0” max=“5” with the step attribute omitted, allows the range slider to select 5 positions in increments of 1.

Hi Yasir the max value of the range slider is 100, we could use the step attribute for more precise increments in, say, a seek bar for a long audio track.

Hi Data use the value attribute to determine the starting position of the ‘thumb control’ in the range slider. For example where value=“3” min=“1” max=“5” the control will default to start position 3 of 5 positions (with 1 being furthest left and 5 being furthest right), which is the middle of the range slider. We can use min=“0” also which is useful for when we need a zero value like for volume control on audio players. The max attribute’s maximum value is 100, if we need more increments we can use the step attribute.

1 Like

i think this is optional right now but may be compulsory to use in some other conditions in upcoming elements … let see :slightly_smiling_face:

1 Like

This is a really nit-picky thing, but is there any way to create more separation between the words rare and well-done? Also, how do I not make the slider have the blue thing as if you’re measuring something? If you are picking something can I just have a dot that I move? Can I not start the dot on the left and have it strat in the middle? There are websites in which you move it along a scale. How would I do something like that?

Hello, I was wondering what attributes would need to be added to the “range” input in order to label individual steps along that range? I imagine it could be done with spans in a separate line below or above the input but is there a standard way of doing this?


“EDIT” - Im thinking it could be done with JavaScript using a variable command attached to the input element and span some how…maybe something like “If range=5 of 10 then span=medium” or something like that hahaha. I know thats not the actual code language but you probably get my point. Does anyone know specifics on this?

Getting an error msg asking if i set min input to “0” which I have done

Screen Shot 2021-01-06 at 20.48.38

Ah ok I see where Ive gone wrong