Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make an Image Changer With A Slider
JWZ6 (402)

Hiya Everyone :)!

Noice

Today, I'll be teaching you on how to make an image switcher thingy...

Important Code

Oninput

Oninput can be used both in Javascript or HTML! I prefer the Javascript way, though. In HTML, we could have:

<input type="text" oninput="your_func()">
<script>
  function your_func(){
    // Just an example
    alert("Yay!");
  }
</script>

Oninput is an attribute in HTML, so that when a user does something to the input, it'll do what you want it to do. If you want to use Javascript, you might use:

var your_var = document.getElementById("example_id");
your_var.oninput = function(){
  alert("example");
}

I prefer this way because it's easier. Go to here to learn more about oninput.

<Input type="range">

<Input type="range"> is how you get the slider. The slider is actually an input type if you didn't know. For example, you might have:

<input type="range" id="slider">
<p>Look!</p>

Click me to learn more about <input type="range">.

Min, max, step, and value

These are all HTML attributes. Min gives out the minimum number of the range. Max does the opposite. Step takes up how much each move's value is. Valueis the number the range takes. It's a bit confusing. You might have:

<h1>Wow</h1>
<input type="range" min="1" max="5" step="0.5" value="3">

I want you to create a new repl and copy paste the example above. You can learn more about max here, min here, step here, and value here.

Actual Code

For the HTML, we have our <img> and <input> tags:

<img src="img.jpg" id="img">
<br><br>
<input type="range" min="1" max="5" step="1" value="1" id="change_pic">
<script src="script.js"></script>

We then create our variables with Javascript:

var img_changer = document.getElementById("change_pic");
var img = document.getElementById("img");

I prefer using Javascript, but you can also use HTML. Our oninput looks like:

img_changer.oninput = function change(){
  // You must have a function or the changing images won't work
  if (img_changer.value == /* your number */){
    // What you want to do
  }
}

Use the if, else if, and else loops to allow you to detect the pictures and the value.

Ending

Thanks for seeing this! If you don't like this, make sure to upvote and yeah. An example of an image changer is this. Check out my code if you still don't quite understand this.

Bye! :)

Comments
hotnewtop
Bookie0 (6155)

Nice! Kudos for adding syntax highlighting with the code blocks! :)

Chinmayi312 (1)

What would you use this for though?

JWZ6 (402)

@Chinmayi312 image slideshow i guess

InvisibleOne (2777)

I can see plenty of uses for this in web design, especially in business. For example it could be used for a carousel of products or services. @Chinmayi312

JWZ6 (402)

@InvisibleOne glad you like it or think it's useful.