CODEWITHSUNDEEP
jqueryjquery-mobile
merlin
merlin

Reputation: 2917

How to display text values with jQuery slider?

My goal is to have a slider where sliding will change an info text.

The jQuery mobile docs show unfortunatelly only numeric values: http://demos.jquerymobile.com/1.4.5/slider/

At the moment I am using a select field:

<select name="condition" id="filter_condition"> 
    <option value="18">Average</option> 
    <option value="13">Good</option>
    <option value="277">Bad</option>
</select>

As in this example the values are not 1-3 and not in order.

Instead of showing the select field, I would like to show a slider, where bad is on the left and good on the right.

Is this possible with jQuery mobile? I found only examples with numeric values.

Upvotes: 0

Views: 1086

Answers (1)

deblocker
deblocker

Reputation: 7697

Can't fully understand why Your values shall be not ordered, but anyway, here is my proposal.

If this is not exactly what You expect, fell free to update Your question with more details.

In Your example, You just only need to create the three slider sectors corresponding with Your options and, obviously, the relationship with these. Use cases[val].value to filter out what You need. The input.change event is Your friend here. 

$(document).on("pagecreate", "#page-one", function() {
  var cases = [{value:277, label:"bad"},{value:18, label:"average"},{value:13, label:"good"}];
  $(".full-width-slider input").on("change", function() {
    var val = ($(this).val()/100)|0;
    $(".full-width-slider h3").text(cases[val].label);
  });
});
/* Hide the number input */
.full-width-slider input {
  display: none !important;
}
.full-width-slider .ui-slider-track {
  margin-left: 15px;
}

.full-width-slider h3 {
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <div class="full-width-slider">
        <h3 class="ui-bar ui-bar-a ui-corner-all">bad</h3>
        <input type="range" min="0" max="299" value="0" autocomplete="off" />
      </div>
    </div>
  </div>
</body>
</html>

Here is another example about the slider events: https://stackoverflow.com/a/44519349/4845566

Upvotes: 1

Related Questions