Storing the slider value in a universal variable and displaying it in a div

I am currently working on a jQuery slider feature for my project. My goal is to extract the value from the slider, display it in a div element, and store it as a global JavaScript variable. It needs to perform these actions immediately as the slider is being moved. Here's what I have accomplished so far:

<div id="tabs-1">
    <p>Brush Size</p>
    <div id="slider"></div>
    <div id="Total">0</div>
  </div>


  var brushSize;




var slider = $('#slider').slider({ 
    steps: 100,
    handle: $('.knob'),
    animate:'true',
    min:1,
    max:100,
    startValue: 1,
    change: function(e,ui){
        brushSize = ui;

    }

At this point, I'm unsure of how to proceed as the code is not functioning correctly without any error messages.

You can view a working example at the following link:

javascripthtmlcsscanvas

Answer №1

Modify

brushSize = ui;

to

brushSize = ui.value;

... if you have already defined brushSize in another div, otherwise use:

$('#Total').html(ui.value);

Answer №2

Easy ...

<div id="tabs-1">
<p>Brush Size</p>
<div id="slider"></div>
<div id="Total">0</div>


let brushSize;

 let slider = $('#slider').slider({ 
steps: 100,
handle: $('.knob'),
animate:'true',
min:1,
max:100,
startValue: 1,
change: function(e,ui){
    brushSize = ui.value;
    $('#Total').html(ui.value);
}

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

How to retrieve the optgroup label from a Bootstrap Select dropdown

Currently, I am working with a BootStrap select box and my goal is to identify the optgroup of the option that has been selected. The following code snippet showcases a bootstrap select box with different options: <li rel="1"> <div class="div- ...

jqueryhtml

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Is it possible to incorporate a static lighting effect overlay using HTML/CSS? My project consists of an HTML5/JS app with a top navigation bar and a series of cards that are transitioned through using swipe gestures. These cards are displayed in gray ove ...

javascripthtmlcss

At times, JavaScript interacts with Selenium to click on the login button before I have the chance

I have a challenge while attempting to log in to Twitter using Selenium webdriver, here is the code I am working with: const {Builder, By} = require("selenium-webdriver"); (async function example() { let driver = await new Builder().forBrowser(' ...

javascriptnode.jsseleniumpromise

Incorporate ng-model to manage dynamically generated HTML elements

I have created dynamic div elements with a button inside, and I want to access its value using ng-model, but the value is not being retrieved. Here is my code: var url = "/api/chatBot/chatBot"; $http.post(url,data) .success(function(data){ $scope.mes ...

javascripthtmlangularjs

Need help with styling for disabled autocomplete? Check out the attached image

I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...

htmlcssreactjsmaterial-ui

What could be causing the removal of style classes from my element after it is appended?

Could you please explain how it functions? I am attempting to append a div with content using innerHTML and it is working, but without any of the styling classes being applied. const element = document.createElement("div"); element.classList.add("col ...

javascripthtmlbootstrap-5

What is the largest file size that JavaScript is capable of processing?

Similar Inquiry: Javascript Memory Limit Currently, I am in the process of constructing an HTML page using client-side JavaScript that aims to load a significant XML data file weighing around 150mb upon page initialization. Initially, when the file si ...

javascriptjqueryxml

Unable to load routes from ./app.js in the file ./src/routes/index.js

Just dipping my toes into the world of nodejs. I recently moved all my routes from app.js to a separate file located at PROJECT_DIR/src/routes/index.js. However, when I try to open the page in my browser, it displays "Cannot GET /wines". Below are snippets ...

javascriptnode.jsexpress

Trouble selecting element using Selenium in Python

I had a script that was working fine, but suddenly it stopped working. Whenever I run the script, the item is not clicked and an error message appears. Traceback (most recent call last): File "/Users/6ko/Desktop/CodePython/katas/kata3.py", line ...

pythonhtmlseleniumselenium-webdriverautomation

JavaScript Error Caused by Newline Characters

I'm facing an issue with extracting data from a textbox using JavaScript. What I'm attempting to do is retrieve the value from a textbox, display it in an alert, and then copy it. Here's the current code snippet: var copyString = "Date: < ...

javascripthtmlasp.nettextbox

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...

htmlcss

React error: Unable to use 'in' operator to find 'length' in null

I am trying to access and filter a local array file, then store the filtered array as a state before passing it to a child component. // Sample array file const originalData = [ { "ComName":"A", "SDGs":"1", " ...

javascriptreactjs

Yet another interactive JQuery feature found within the JQuery UI Tabs framework, utilizing seamless Ajax page loading

Currently, I am using JQuery U Tabs with Ajax Page Calls. In my Pages, I have a custom scroller that is functioning correctly. Additionally, I have an ajax search table that works when the page is loaded by itself in the browser but not when called within ...

javascriptjqueryhtmlcss

Using an arrow function in Aurelia to read a json file

I've been exploring Aurelia and delved into tutorials on PluralSight and Egghead.io, but I'm still struggling to resolve my current issue. In a JSON file named bob.json, there is a collection of objects related to Bob. Each object in the collect ...

javascriptjsonlambdaaurelia

Switch the following line utilizing a regular expression

Currently, I am facing a challenge with a large file that needs translation for the WordPress LocoTranslate plugin. Specifically, I need to translate the content within the msgstr quotes based on the content in the msgid quotes. An example of this is: #: . ...

javascriptregextypescript

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

javascriptcss

Each time the system boots up, a new Xpath ID is generated dynamically, making it difficult to pinpoint

Suppose you want to modify an element with no direct identifiers, but using a similar Xpath: #js_n6 > div > ul > li:nth-child(4) > a > span > span You may typically use it within document.querySelector(''), but there's a ...

javascriptcssdomxpath

Change the server's response into a usable object using JavaScript

When receiving a response from the server, it appears in this format: {"value1":1,"value2":45,"value3":"x"} {"value1":1,"value2":45,"value3":"x"} {"value1":1," ...

javascriptarrays

Utilizing getStaticProps for Performance Optimization in Next.js

I am currently in the process of setting up a blog using Next.js and GraphCMS. I have an ArticleList component that I want to display on multiple pages, such as my homepage and under each article as a recommendation. Since the article list is sourced from ...

javascriptreactjsnext.js

Achieve horizontal centering of modal without the use of jQuery

Currently, I am developing a modal within a React application. The modal's width is set to auto and its position is set to fixed. My goal is to center it horizontally in the middle of the screen. .Modal { position: fixed; width: auto; z- ...

htmlcssreactjs