Slider in cordova

0
votes

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)

1
javascriptjqueryhtmlcsscordova
you referenced in the head three different libraries with sliders, i believe you need to clean-up, first. - deblocker

1 Answers

1
votes

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"));