jQuery UI slider with text

by katalin_2003

HTML

<p id="text">
  <label for="amount">Car model :</label>
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider"></div>

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	/*font-size: 62.5%;*/
}

#slider{
    width: 80%;
    margin: 0 auto;
}
#text{
    width:80%;
    margin-right:auto;
    margin-left:auto;
}

JavaScript

/*
<!--
<head>
  <title>jQuery UI Slider - Snap to increments</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
</head>
-->
*/

/*var cars = ["Saab", "Volvo", "BMW", "DACIA"];
      //$( "#amount" ).val(ui.value + cars);
      var arrayLength = cars.length;
      for (var i = 0; i < arrayLength; i++) {*/
      
  $(function() {
    $( "#slider" ).slider({
      value: 0,
      min: 0,
      max: 3,
      step: 1,
      slide: function( event, ui ) {

      if (ui.value === 0){
      ui.value = "Saab";
      }
      else if (ui.value === 1){
      ui.value = "Volvo";
      }
      else if (ui.value === 2){
      ui.value = "BMW";
      }
      else if (ui.value === 3){
      ui.value = "Dacia";
      }
          $( "#amount" ).val(ui.value);
      
      }
    });
      //$( "#amount" ).val($( "#slider" ).slider( "value" ) + " €");
      $( "#amount" ).val("Saab");
  });
      /*}*/