-2

I´m new here.. sorry for my bad English :D

I´m looking for a range slider with fixed values and additional text output.

Here is a example: http://james2013.batcave.net/s100.htm

<p>
</p><div id="resolution-slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
<div id="resolution"></div>
<div class="resolution-preview">6</div>

<h4>Slider width is set in css for this page</h4>
<script>
$(document).ready(function(){
    var valMap = [6, 10, 12, 18 , 35, 56];
    $("#resolution-slider").slider({
      value: valMap[0],  // Start slider from first (0th) element
      max: valMap.length-1, // Set "max" attribute to array length minus 1
      min: 0,
      values: [0], 
      create: function( event, ui ) {  // Place numeric value on page before slide
      $(".resolution-preview").html(valMap[0]); 
      },
      slide: function(event, ui) {
        $("#resolution").val(valMap[ui.values[0]]); // Fetch selected value from array               
        $(".resolution-preview").html(valMap[ui.values[0]]);
      }  
    });
});
</script>

If the number 18 is displayed, a text that applies only to this value must also be displayed.

If a different number is selected, a different text will appear.

Thanks for the help guys <3

Twisty
  • 30,304
  • 2
  • 26
  • 45
Thomas Dee
  • 1
  • 1
  • 1
    What code have you tried? Have you done any research, for example into javascript? – Run_Script May 28 '20 at 21:28
  • Welcome to Stack Overflow. In the future, always provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example Additionally, it's good to take the Tour: https://stackoverflow.com/tour – Twisty May 28 '20 at 21:33
  • Unfortunately I have little knowledge of javascript. I used to be able to, but I haven't worked in IT for over 5 years. – Thomas Dee May 28 '20 at 21:35

1 Answers1

0

As you are not using a Range, you do not need to use values only the 1 value. Consider the following example.

$(document).ready(function() {
  var valMap = ["6 (Six)", "10 (Ten)", "12 (Twelve)", "18 (Eighteen)", "35 (Thirty Five)", "56 (Fifty Six)"];
  $("#resolution-slider").slider({
    value: 0,
    max: valMap.length - 1,
    min: 0,
    create: function(event, ui) {
      $(".resolution-preview").html(valMap[0]);
    },
    slide: function(event, ui) {
      $(".resolution-preview").html(valMap[ui.value]);
    }
  });
});
#resolution-slider {
  width: 500px;
  margin-left: 50px;
}

.resolution-preview {
  margin-top: 10px;
  margin-left: 50px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p></p>

<div id="resolution-slider"></div>
<div class="resolution-preview">6</div>

<h4>Slider width is set in css for this page</h4>

As the slider is moved from 0 to 5, that value is then used as the Index of the valMap array.

Updated

If you want to display text, you simply need to update the Array so it has text instead of just Numbers.

Twisty
  • 30,304
  • 2
  • 26
  • 45