Using a slider in Cordova application

Currently, I am in the process of developing an app using Cordova. However, I have encountered an issue with the slider feature.
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)

javascriptjqueryhtmlcsscordova

Answer №1

When coding the line:

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

Consider using 

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

or

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

Note: I came across a discussion on a similar topic here. In your current code, you are attempting to call a "value" method on the slider, which does not exist. As per the documentation on npmjs, this can be achieved by using the 'getValue' method. Therefore, it is recommended to update your code to:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selecting multiple values using Ajax in a select2 dropdown menu

I am currently using Select2 and fetching data in JSON format via AJAX. View: <select class="form-control qual_id" multiple> <option value="">-Select Degree-</option> <option value="1">SSC</option> <option val ...

phpjqueryajaxlaraveljquery-select2

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

Using d3.js to toggle visibility of bars when clicking on the legend

// Handling the browser onresize event window.onresize = function () { scope.$apply(); }; scope.render = function (data) { var ageNames = d3.keys(data[0]).filter(function (key) { ...

javascriptangularjsd3.js

Alter appearance of images depending on browser window size

I am working on an angular JavaScript code snippet that uses the ng-repeat command to display a row of small images. I want to ensure that these images do not spill over into a second line when the browser window is resized. Instead, I prefer them to eith ...

javascripthtmlcssangularjs

Utilizing the JavaScript map method to structure API response data

Here is the JSON data I have: { "result": [{ "name": "a", "value": 20, "max": 100, "sale_value": [{ "no": 1, "name": "aaaaa", "price": 200 }, { "no": 2, ...

javascriptreactjsvue.js

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

Description : I have implemented a dropdown list using element that contains a list of items along with a search field. This allows users to easily search for specific items in the list instead of manually scrolling through a long dropdown menu. They can ...

javascripthtmlangularmat-selectmat-option

Could it be a mistake causing Echo to fail in fetching information from advanced custom fields?

When setting up in-content advertising for my blog posts on WordPress, I wanted the ads to point towards other sections of my site. Everything was working fine with the shortcode [in-content] pulling the most recent post from the 'advertising' cu ...

phphtmlwordpressif-statementadvanced-custom-fields

Utilize HTML to pre-load a font and incorporate it into your CSS styling

It is common knowledge that when we include the following code in our .css file: @font-face { font-family: "Akrobat-Regular"; src: url('/assets/Akrobat-Regular.otf') format("truetype"); } body { color: #1c1c1c ...

htmlcssfonts

Utilizing jQuery to Manage Trays | Automatically Close Tray on Second click

I am working on a navigation menu with four buttons and a section that contains four additional sections. The functionality I am trying to achieve is that when a navigation button is clicked, a corresponding section slides out while the previous one slides ...

jqueryhtmlcss

Unexpected Visual Basic Web Label Formatting

I am facing an issue with the styling of a complex label. The CSS code doesn't always apply as expected. Interestingly, when I ran this code on two different machines, the styles were inconsistent. The code seems messy and disorganized to me, but al ...

htmlcssasp.netvb.net

SVG polyline animation that persists seamlessly

In my TypeScript code, I have implemented a function that creates a polyline based on 4 different points (x1y1, xCy1, xCy1, x2y2), where Xc represents the half distance between x1 and x2 on a plane. This polyline does not form a circular shape. private cre ...

javascripttypescriptsvgpolylinesvg-animate

Guide on how to assign a masterpage DOM element to a content page using JavaScript

Within an ASP.NET master page, there is a specific div element that I want to hide in one of its content pages. To achieve this, I included the following JavaScript code at the end of the content page: if (document.getElementById('sitemap')) { ...

c#javascriptasp.netdommaster-pages

Exploring ways to utilize Vue data variables and methods within the configuration options of Tabulator

Utilizing tabulator in conjunction with vue using the following packages: tabulator-tables and vue-tabulator. In an attempt to implement a click event on the tabulator row, I am faced with the challenge of accessing vue data variables within the scope of ...

javascriptvue.jstabulator

Learning how to access my CSS file using Express and Node.js

I am new to using express and node.js. I am trying to develop my app, but for some reason, my style.css file is not being recognized and I am unsure why. Initially, I attempted to use .scss files, but after researching, I discovered that it was not possi ...

javascripthtmlcssnode.jsexpress

Unleashing the Power of Node.js: A Step-by-Step Guide to Crafting

I am developing a console interface that prompts the user with questions and receives input through the console. Some questions require the user to provide a limited number of inputs. I have researched ways to obtain console input in node js, but I haven&a ...

javascriptjsonnode.js

jQuery Mobile hyperlinks are malfunctioning despite having identical coding

I'm facing an issue with my jquery mobile site where some links are functioning correctly while others are not. The links for the top logo, "Bundle", and "Legal Disclaimers" don't seem to work even though they are all coded the same. If anyone ca ...

jqueryjquery-mobilehyperlink

Issue with Javascript/Jquery functionality within a PHP script

I have been attempting to incorporate a multi-select feature (view at http://jsfiddle.net/eUDRV/318/) into my PHP webpage. While I am able to display the table as desired, pressing the buttons to move elements from one side to another does not trigger any ...

javascriptphpjqueryhtmlcss

Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play onc ...

javascripthtmlcsssvg

The request's body in the PUT method is void

I seem to be having an issue with my PUT request. While all my other requests are functioning properly, the req.body appears to remain empty, causing this error message to occur: errmsg: "'$set' is empty. You must specify a field like so: ...

javascriptnode.jsmongodbexpressput

Is it possible to alter the color of the text "midway" within a character on a website?

In some desktop applications, I've noticed a cool feature where the color of text changes as the background evolves. This allows for multiple colors on a single character, which is especially useful when displaying progress bars with percentages insid ...

htmlcsscolorsprogress-bar