JQuery Mobile slider string instead of number

Question

I´ve implemented a jQuery Mobile Slider in my app. This is the code

<input type="range" name="slider-1" id="slider-1" min="1" max="5" value="1">
<div id="hint"></div>

JS

var text = {1 : "bad", 2 : "okay", 3 : "better"};
var $sliderText = $('#hint');
var refresh = function(e){
    $sliderText.text(text[$( '#slider-1' ).slider('value')]);
};

$( '#slider-1' ).slider({
      slide: refresh,
      change: refresh
});

This slider comes with a input field where the current Value of the slider is shown, e.g 1,2,3,4,5. I want to have strings instead of number like: 1 = bad, 2 = okay, 3 = better... I tried it with the onChange event but it doesn´t work.

I hope someone here can help?

@m1crdy you can call the plugin like in my post I've just checked — TecHunter, Aug 27 '13 at 14:39

TecHunter · Answer 1 · 2013-08-28T07:39:45.760

0

try with :

JS

var text = {
    1: "bad",
    2: "okay",
    3: "better",
    4: "great",
    5: "awesome"
};
var $sliderText = $('#hint');

var refresh = function (e) {
    $sliderText.text(text[$('#slider-1').slider('value')]);
};
$(function () {
    $('#slider-1').slider({
        min: 1,
        max: 5,
        slide: refresh,
        change: refresh
    });
    refresh();
});

HTML

You need to remove type="range" or it will conflict between JQuery mobile API and jqUI

<div id="slider-1"></div>
<div id="hint"></div>

http://jsfiddle.net/techunter/fKcjy/

note that JQuery UI sliders never really liked being in a frame

edited Aug 28 '13 at 07:39

answered Aug 27 '13 at 14:23

TecHunter

6,091
2
30
47

i think this is the jQuery UI call. Do you mean that i need to have an input with id="slider"? your code has no effect in my current markup :( – m1crdy Aug 27 '13 at 15:25
@m1crdy think a bit by yourself.... obviously you had to change the id. I've made the edit. It's the UI call, you don't want to use it? – TecHunter Aug 28 '13 at 06:24
yeah of course i have to edit the IDs. I´ll edited my post but it don´t work. – m1crdy Aug 28 '13 at 07:29
@m1crdy looks like the `input type="range"` messes things up. – TecHunter Aug 28 '13 at 07:40
1

ohhh. I don´t have included Jquery UI in my project. I don´t want to include it to be honest. JQUI is to heavy weight for my app. is there no solution only with JQM? Thank you for your help! – m1crdy Aug 28 '13 at 11:30
@m1crdy using the input type `range` then you might check out http://stackoverflow.com/questions/4583083/jquerymobile-how-to-work-with-slider-events – TecHunter Aug 29 '13 at 07:13

score 0 · Accepted Answer · answered Sep 09 '13 at 10:30

I solved this with the following code:

<input type="range" name="slider-1" id="slider-1" min="1" max="5" value="1">
<div id="hint"></div>

JS:

// Slider Handling
                $( "#slider-1" ).on( 'change', function( event ) {
                       var val = $("#slider-1").val();
                       if(val == 1){
                            $("#hint").empty();
                            $("#hint").append("beschissen");
                       }else if(val == 2){
                            $("#hint").empty();
                            $("#hint").append("naja");
                       }else if(val == 3){
                            $("#hint").empty();
                            $("#hint").append("passt");
                       }else if(val == 4){
                            $("#hint").empty();
                            $("#hint").append("fett");
                       }else if(val == 5){
                            $("#hint").empty();
                            $("#hint").append("geilo");
                       }

                    });

JQuery Mobile slider string instead of number

2 Answers2