Slider in cordova

Question

I am creating an app with cordova. I am getting an error with slider.
HTML

<body>
<div id="slider">
    <div id="custom-handle" class="ui-slider-handle"></div>
</div>
    <script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.12.1.js"></script>
    <script type="text/javascript" src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap-slider.min.js"></script>
    <script type="text/javascript" src="scripts/temperature.js"></script>
</body>

javascript

$(function () {
    var handle = $("#custom-handle");
    $("#slider").slider({
        create: function () {
            handle.text($(this).slider("value"));
        },
        slide: function (event, ui) {
            handle.text(ui.value);
        }
    });
});

CSS

#custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
}

ERROR

VM93 jquery-2.1.4.min.js:2 Uncaught Error: no such method 'value' for slider widget instance at Function.error (http://localhost:4400/scripts/jquery-2.1.4.min.js:2:1821) at HTMLDivElement. (http://localhost:4400/scripts/jquery.mobile-1.4.5.min.js:3:10693) at Function.each (http://localhost:4400/scripts/jquery-2.1.4.min.js:2:2882) at n.fn.init.each (http://localhost:4400/scripts/jquery-2.1.4.min.js:2:847) at n.fn.init.a.fn.(anonymous function) [as slider] (http://localhost:4400/scripts/jquery.mobile-1.4.5.min.js:3:10498) at HTMLDivElement.create (http://localhost:4400/scripts/temperature.js:5:33) at a.(anonymous function).(anonymous function)._trigger (http://localhost:4400/scripts/jquery.mobile-1.4.5.min.js:3:14553) at a.(anonymous function).(anonymous function)._createWidget (http://localhost:4400/scripts/jquery.mobile-1.4.5.min.js:3:11664) at new a.(anonymous function).(anonymous function) (http://localhost:4400/scripts/jquery.mobile-1.4.5.min.js:3:9187) at HTMLDivElement. (http://localhost:4400/scripts/jquery.mobile-1.4.5.min.js:3:10922)

you referenced in the `head` three different libraries with sliders, i believe you need to clean-up, first. — deblocker, Jul 04 '17 at 06:16

Joel · Answer 1 · 2017-06-27T09:21:51.630

1

On the line:

handle.text($(this).slider("value"));

Should be

handle.text($(this).slider.val());

or

handle.text($(this).slider.attr("value");

Edit: Actually found a thread on a similar issue here. With your code, you are trying to access a method called "value" on the slider, however, this method does not exist. According to the documentation on npmjs, this can be accessed through the 'getValue' method. Therefore, your code should be updated to:

handle.text($(this).slider("getValue"));

edited Jun 27 '17 at 09:21

answered Jun 27 '17 at 08:46

Joel

100
6

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. – Peter Jun 27 '17 at 08:50

Slider in cordova

1 Answers1