JQuery - Range slider issue - changing image

Question

I have the following issue:

I want to add an Range Slider
By moving the trigger different images should appear

The goal:

To combine the 2 Range Slider Examples to one!
I want to have the design of the first Range Slider
But with the function of the second Range Slider (the ability to change images)

Hope ya'll can help me - Cheers!

.slider{display:inline-block;vertical-align:middle;position:relative}.slider.slider-horizontal{width:50%;height:20px}.slider.slider-horizontal .slider-track{height:5px;width:100%;margin-top:-3px;top:50%;left:0;     background-image: linear-gradient(to top, #D4D4D4 0%, #BDBDBD 100%);
    border: 0;
    content: ' ';
    display: block;
    height: 5px;
    left: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 10px;
    transition: height .5s ease, opacity 1s ease;
    z-index: -20;}.slider.slider-horizontal .slider-selection,.slider.slider-horizontal .slider-track-low,.slider.slider-horizontal .slider-track-high{height:100%;top:0;bottom:0}.slider.slider-horizontal .slider-tick,.slider.slider-horizontal .slider-handle{margin-left:-10px}.slider.slider-horizontal .slider-tick.triangle,.slider.slider-horizontal .slider-handle.triangle{position:relative;top:50%;transform:translateY(-50%);border-width:0 10px 10px 10px;width:0;height:0;border-bottom-color:#2e6da4;margin-top:0}.slider.slider-horizontal .slider-tick-container{white-space:nowrap;position:absolute;top:0;left:0;width:100%}.slider.slider-horizontal .slider-tick-label-container{white-space:nowrap;margin-top:20px}.slider.slider-horizontal .slider-tick-label-container .slider-tick-label{padding-top:4px;display:inline-block;text-align:center}.slider.slider-horizontal.slider-rtl .slider-track{left:initial;right:0}.slider.slider-horizontal.slider-rtl .slider-tick,.slider.slider-horizontal.slider-rtl .slider-handle{margin-left:initial;margin-right:-10px}.slider.slider-horizontal.slider-rtl .slider-tick-container{left:initial;right:0}.slider.slider-vertical{height:210px;width:20px}.slider.slider-vertical .slider-track{width:10px;height:100%;left:25%;top:0}.slider.slider-vertical .slider-selection{width:100%;left:0;top:0;bottom:0}.slider.slider-vertical .slider-track-low,.slider.slider-vertical .slider-track-high{width:100%;left:0;right:0}.slider.slider-vertical .slider-tick,.slider.slider-vertical .slider-handle{margin-top:-10px}.slider.slider-vertical .slider-tick.triangle,.slider.slider-vertical .slider-handle.triangle{border-width:10px 0 10px 10px;width:1px;height:1px;border-left-color:#2e6da4;border-right-color:#2e6da4;margin-left:0;margin-right:0}.slider.slider-vertical .slider-tick-label-container{white-space:nowrap}.slider.slider-vertical .slider-tick-label-container .slider-tick-label{padding-left:4px}.slider.slider-vertical.slider-rtl .slider-track{left:initial;right:25%}.slider.slider-vertical.slider-rtl .slider-selection{left:initial;right:0}.slider.slider-vertical.slider-rtl .slider-tick.triangle,.slider.slider-vertical.slider-rtl .slider-handle.triangle{border-width:10px 10px 10px 0}.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label{padding-left:initial;padding-right:4px}.slider.slider-disabled .slider-handle{background-image:-webkit-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:-o-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:linear-gradient(to bottom,#dfdfdf 0,#bebebe 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf',endColorstr='#ffbebebe',GradientType=0)}.slider.slider-disabled .slider-track{background-image:-webkit-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:-o-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:linear-gradient(to bottom,#e5e5e5 0,#e9e9e9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5',endColorstr='#ffe9e9e9',GradientType=0);cursor:not-allowed}.slider input{display:none}.slider .tooltip.top{margin-top:-36px}.slider .tooltip-inner{white-space:nowrap;max-width:none}.slider .hide{display:none}.slider-track{position:absolute;cursor:pointer;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#f9f9f9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px}.slider-selection{position:absolute;background-image:-webkit-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-selection.tick-slider-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:linear-gradient(to bottom,#8ac1ef 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef',endColorstr='#ff82b3de',GradientType=0)}.slider-track-low,.slider-track-high{position:absolute;background:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-handle{position:absolute;top:0;width:20px;height:20px;
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.31);
    background: #d4d4d4;
    background-image: linear-gradient(to bottom, #EFEFEF, #bbbbbb);
    background-size: auto 60px;
    background-repeat: no-repeat;
    transition: box-shadow 0.1s linear, background-position 0.1s linear;
    background-image: linear-gradient(to top, #1B1E28 15%, #e94843 100%);
    height: 38px;
    left: -18px;
    text-align: center;
    top: -6px;
    width: 32px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);}.slider-handle.round{border-radius:}.slider-handle.triangle{background:transparent none}.slider-handle.custom{background:transparent none}.slider-handle.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick{position:absolute;width:2px;height:20px;background-image:-webkit-linear-gradient(top,#aeaeae 0,#d1d1d1 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,##afafaf 0,#d1d1d1 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;filter:none;opacity:1;border:0 solid transparent}.slider-tick.round{border-radius:}.slider-tick.triangle{background:transparent none}.slider-tick.custom{background:transparent none}.slider-tick.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick.in-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#d1d1d1 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#d1d1d1 100%);background-image:linear-gradient(to bottom,#afafaf 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ac1ef',endColorstr='#afafaf',GradientType=0);opacity:1}



.slider-handle:after {
    content:"";
    border-left: 1px solid #17181E;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    height: 18px;
    margin: 8px 2px;

}

.slider-handle span {
    border-left: 1px solid #17181E;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    height: 18px;
    margin: 8px 2px;
}

.slider-handle::after span {
    border-left: 1px solid #17181E;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    height: 18px;
    margin: 8px 2px;
}

.range-slider {
margin-left: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>


<h3> Main Slider </h3>

<div class="range-slider">
<span id="ex18-label-1" class="hidden"></span>
        <input id="ex19" type="text"
              data-provide="slider"
              data-slider-ticks="[1, 2, 3, 4, 5]"
              data-slider-ticks-labels='["phase 1", "phase 2", "phase 3", "phase 4", "phase 5"]'
              data-slider-min="1"
              data-slider-max="5"
              data-slider-step="1"
              data-slider-value="1"
              data-slider-tooltip="hide"  />
              
              </div>
            <br>
            <br>
            
 <h3> Image Slider </h3>
           
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
<br /><br />
<img src="" style='width:100px;height:100px;' id='img'/>
slider value = <span id="sliderStatus">0</span>
      
              
              
              <script>var imageUrl = new Array();

        imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

        imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

        imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';

        imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

        imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

        imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
       
$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").prop("src", imageUrl[v]);
});</script>

STOP SHOUTING. Just like everywhere else on the planet, typing in ALL CAPS is considered SHOUTING, and there's no need to SHOUT HERE. It won't get you help any faster, it makes text more difficult to read, and it's simply rude. When you look at the main page's list of questions, you don't see any (besides yours) in ALL CAPS, because that's inappropriate behavior here. Stop now, please. — Ken White, Oct 05 '17 at 17:33
You have stated what you wanted but you have not pointed out any issues you are having — Huangism, Oct 05 '17 at 17:35
Hey, I did - I guess. I want to combine the both rangle sliders (look at the code snippet). I want to have the design of the first slider and the functionality (changing images due dragging) of the second range slider. thank youu! — Margo, Oct 05 '17 at 17:47
hey, mate. yes i did. thank you very much for your fast reply. is it know possible to delete the second range slider? — Margo, Oct 05 '17 at 18:10

score 1 · Accepted Answer · answered Oct 05 '17 at 17:52

Use onchange="changeslider(value)

And then

function changeslider(val) {
  $('#sliderStatus').html(val);
  $("#img").prop("src", imageUrl[val]);
}

Demo

var imageUrl = new Array();

imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';

imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';

$(document).on('input change', '#slider', function() { //listen to slider changes
  var v = $(this).val(); //getting slider val
  $('#sliderStatus').html($(this).val());
  $("#img").prop("src", imageUrl[v]);
});

function changeslider(val) {
  $('#sliderStatus').html(val);
  $("#img").prop("src", imageUrl[val]);
}

.slider {
  display: inline-block;
  vertical-align: middle;
  position: relative
}

.slider.slider-horizontal {
  width: 50%;
  height: 20px
}

.slider.slider-horizontal .slider-track {
  height: 5px;
  width: 100%;
  margin-top: -3px;
  top: 50%;
  left: 0;
  background-image: linear-gradient(to top, #D4D4D4 0%, #BDBDBD 100%);
  border: 0;
  content: ' ';
  display: block;
  height: 5px;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 10px;
  transition: height .5s ease, opacity 1s ease;
  z-index: -20;
}

.slider.slider-horizontal .slider-selection,
.slider.slider-horizontal .slider-track-low,
.slider.slider-horizontal .slider-track-high {
  height: 100%;
  top: 0;
  bottom: 0
}

.slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
  margin-left: -10px
}

.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-width: 0 10px 10px 10px;
  width: 0;
  height: 0;
  border-bottom-color: #2e6da4;
  margin-top: 0
}

.slider.slider-horizontal .slider-tick-container {
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

.slider.slider-horizontal .slider-tick-label-container {
  white-space: nowrap;
  margin-top: 20px
}

.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
  padding-top: 4px;
  display: inline-block;
  text-align: center
}

.slider.slider-horizontal.slider-rtl .slider-track {
  left: initial;
  right: 0
}

.slider.slider-horizontal.slider-rtl .slider-tick,
.slider.slider-horizontal.slider-rtl .slider-handle {
  margin-left: initial;
  margin-right: -10px
}

.slider.slider-horizontal.slider-rtl .slider-tick-container {
  left: initial;
  right: 0
}

.slider.slider-vertical {
  height: 210px;
  width: 20px
}

.slider.slider-vertical .slider-track {
  width: 10px;
  height: 100%;
  left: 25%;
  top: 0
}

.slider.slider-vertical .slider-selection {
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0
}

.slider.slider-vertical .slider-track-low,
.slider.slider-vertical .slider-track-high {
  width: 100%;
  left: 0;
  right: 0
}

.slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle {
  margin-top: -10px
}

.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
  border-width: 10px 0 10px 10px;
  width: 1px;
  height: 1px;
  border-left-color: #2e6da4;
  border-right-color: #2e6da4;
  margin-left: 0;
  margin-right: 0
}

.slider.slider-vertical .slider-tick-label-container {
  white-space: nowrap
}

.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
  padding-left: 4px
}

.slider.slider-vertical.slider-rtl .slider-track {
  left: initial;
  right: 25%
}

.slider.slider-vertical.slider-rtl .slider-selection {
  left: initial;
  right: 0
}

.slider.slider-vertical.slider-rtl .slider-tick.triangle,
.slider.slider-vertical.slider-rtl .slider-handle.triangle {
  border-width: 10px 10px 10px 0
}

.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
  padding-left: initial;
  padding-right: 4px
}

.slider.slider-disabled .slider-handle {
  background-image: -webkit-linear-gradient(top, #dfdfdf 0, #bebebe 100%);
  background-image: -o-linear-gradient(top, #dfdfdf 0, #bebebe 100%);
  background-image: linear-gradient(to bottom, #dfdfdf 0, #bebebe 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0)
}

.slider.slider-disabled .slider-track {
  background-image: -webkit-linear-gradient(top, #e5e5e5 0, #e9e9e9 100%);
  background-image: -o-linear-gradient(top, #e5e5e5 0, #e9e9e9 100%);
  background-image: linear-gradient(to bottom, #e5e5e5 0, #e9e9e9 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
  cursor: not-allowed
}

.slider input {
  display: none
}

.slider .tooltip.top {
  margin-top: -36px
}

.slider .tooltip-inner {
  white-space: nowrap;
  max-width: none
}

.slider .hide {
  display: none
}

.slider-track {
  position: absolute;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #f5f5f5 0, #f9f9f9 100%);
  background-image: -o-linear-gradient(top, #f5f5f5 0, #f9f9f9 100%);
  background-image: linear-gradient(to bottom, #f5f5f5 0, #f9f9f9 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px
}

.slider-selection {
  position: absolute;
  background-image: -webkit-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%);
  background-image: -o-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%);
  background-image: linear-gradient(to bottom, #f9f9f9 0, #f5f5f5 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px
}

.slider-selection.tick-slider-selection {
  background-image: -webkit-linear-gradient(top, #8ac1ef 0, #82b3de 100%);
  background-image: -o-linear-gradient(top, #8ac1ef 0, #82b3de 100%);
  background-image: linear-gradient(to bottom, #8ac1ef 0, #82b3de 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0)
}

.slider-track-low,
.slider-track-high {
  position: absolute;
  background: transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px
}

.slider-handle {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.31);
  background: #d4d4d4;
  background-image: linear-gradient(to bottom, #EFEFEF, #bbbbbb);
  background-size: auto 60px;
  background-repeat: no-repeat;
  transition: box-shadow 0.1s linear, background-position 0.1s linear;
  background-image: linear-gradient(to top, #1B1E28 15%, #e94843 100%);
  height: 38px;
  left: -18px;
  text-align: center;
  top: -6px;
  width: 32px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}

.slider-handle.round {
  border-radius:
}

.slider-handle.triangle {
  background: transparent none
}

.slider-handle.custom {
  background: transparent none
}

.slider-handle.custom::before {
  line-height: 20px;
  font-size: 20px;
  content: '\2605';
  color: #726204
}

.slider-tick {
  position: absolute;
  width: 2px;
  height: 20px;
  background-image: -webkit-linear-gradient(top, #aeaeae 0, #d1d1d1 100%);
  background-image: -o-linear-gradient(top, #f9f9f9 0, #f5f5f5 100%);
  background-image: linear-gradient(to bottom, ##afafaf 0, #d1d1d1 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  filter: none;
  opacity: 1;
  border: 0 solid transparent
}

.slider-tick.round {
  border-radius:
}

.slider-tick.triangle {
  background: transparent none
}

.slider-tick.custom {
  background: transparent none
}

.slider-tick.custom::before {
  line-height: 20px;
  font-size: 20px;
  content: '\2605';
  color: #726204
}

.slider-tick.in-selection {
  background-image: -webkit-linear-gradient(top, #8ac1ef 0, #d1d1d1 100%);
  background-image: -o-linear-gradient(top, #8ac1ef 0, #d1d1d1 100%);
  background-image: linear-gradient(to bottom, #afafaf 0, #82b3de 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ac1ef', endColorstr='#afafaf', GradientType=0);
  opacity: 1
}

.slider-handle:after {
  content: "";
  border-left: 1px solid #17181E;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  height: 18px;
  margin: 8px 2px;
}

.slider-handle span {
  border-left: 1px solid #17181E;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  height: 18px;
  margin: 8px 2px;
}

.slider-handle::after span {
  border-left: 1px solid #17181E;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  height: 18px;
  margin: 8px 2px;
}

.range-slider {
  margin-left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script>


<h3> Main Slider </h3>

<div class="range-slider">
  <span id="ex18-label-1" class="hidden"></span>
  <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3, 4, 5]" data-slider-ticks-labels='["phase 1", "phase 2", "phase 3", "phase 4", "phase 5"]' data-slider-min="1" data-slider-max="5" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" onchange="changeslider(value)" />

</div>
<br>
<br>

<h3> Image Slider </h3>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
<br /><br />
<img src="" style='width:100px;height:100px;' id='img' /> slider value = <span id="sliderStatus">0</span>

@Adi If you have a problem with your code or something else, ask a question, then you have a good chance of getting help — Carsten Løvbo Andersen, Nov 18 '19 at 11:24
@CarstenLøvboAndersen i unable to add color with slider thumb value can you go through my question https://stackoverflow.com/questions/60428639/range-input-runner-progress-fill-color — Husna, Feb 27 '20 at 10:43
@CarstenLøvboAndersen In your code images are changes i added transition to the img in css but still transition is not coming. — Husna, Feb 27 '20 at 10:51

JQuery - Range slider issue - changing image

1 Answers1