1 Replies - 209 Views - Last Post: 20 May 2019 - 10:10 AM

#1 jasonsingh   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 17-May 19

Slider Input Value to Change Image

Posted 17 May 2019 - 05:29 PM

Hi,

I am not sure how I change an image based on the input of a slider, I just cannot seem to get the if statement to work. I have taken the section out of the web page I was working on. Thanks for reading.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<center>
		<p>Select Fat Level</p>
		<div class="slidecontainer">
			<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
			<p>Value: <span id="demo"></span></p>
		</div>

		<img src="images/bodytype/fat01muscle01.png" id="quiz-q1-current-bodytype-image">
	</center>

<style type="text/css">
.slidecontainer {
		width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
</style>

<script type="text/javascript">
var slider = document.getElementById("myRange");
        var output = document.getElementById("demo");
        output.innerHTML = slider.value; // Display the default slider value

        // Update the current slider value (each time you drag the slider handle)

        slider.oninput = function() {
            output.innerHTML = this.value;
        }

        if (output.value==60) {
            alert("hi")
            document.getElementById("quiz-q1-current-bodytype-image").src("images/bodytype/fat02muscle01.png");
        }
</script>
</body>
</html>

Attached image(s)

  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Slider Input Value to Change Image

#2 ArtificialSoldier   User is online

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: Slider Input Value to Change Image

Posted 20 May 2019 - 10:10 AM

Any code you want to run in response to the slider being changed needs to happen inside your oninput handler.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1