What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively:

  1. When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it.
  2. Additionally, when I drag the button to the desired location and release it outside the bar div, the percentage below does not refresh. How can I fix this?

Check out the relevant code snippets:

<script src="jQueryUI/external/jquery/jquery.js"></script>
<script src="jQueryUI/jquery-ui.js"></script>
<script src="jQueryUI/jquery-ui.css"></script>

<script>
$(function() {
$( ".draggable" ).draggable({
axis: 'x', containment: [-234,0,450,0]
});
});
</script>

<script>
$( ".but1" ).click(function( event ) {
  var offset = $( ".but1" ).offset();
  event.stopPropagation();
  var conta = (offset.left - 752)/3.42;
  var posFinal = Math.round( conta );
  $( "#resp1" ).text( posFinal + "%" );
});
</script>
.draggable {
width: 700px;
height: 0px;
margin: 0px auto;
position: relative;
}

#bar {
width: 350px;
height: 12px;
background-color: #ff0a00;
border-right: 350px solid #00b4ff;
margin: 0px auto;
border-radius: 5px;
}

#circle {
position: relative;
top: -15px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: black;
margin: 0px auto;
}

#discordo {
position: relative;
top: 65px;
left: -386px;
font-weight: bold;
}

#concordo {
position: relative;
top: 31.8px;
left: 390px;
font-weight: bold;
}

#organizado {
position: relative;
top: -70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="x.php" id="questions">
<h3>Pergunta 1</h3>
<p>Maconha deveria ser legalizada para uso recreacional</p>
<div id="organizado">
<p id="discordo">Discordo</p>
<p id="concordo">Concordo</p>
<div id="bar"> </div>
<div class="draggable ui-widget-content">
<div id="circle" class="but1"> </div>
</div>
<div>
</div>
<p id="resp1"></p>

For better visualization, here is an image: https://i.sstatic.net/9MmZG.png

Answer №1

If you are interested in incorporating a slider on your website, here is a step-by-step guide to help you achieve it.

For a live demonstration, check out this working example: https://jsfiddle.net/Twisty/qpbzavwq/8/

HTML Code:

<form method="post" action="x.php" id="questions">
  <h3>Question 1</h3>
  <p>Should marijuana be legalized for recreational use?</p>
  <div id="organized">
    <p id="disagree">Disagree</p>
    <p id="agree">Agree</p>
    <div id="slider-1" class="slider">
    </div>
    <p id="response1"></p>
  </div>
</form>

CSS Styling:

#slider-1 {
  background-color: #00b4ff;
  margin: .4em .2em;
  border-radius: 5px;
}

#slider-1 .ui-slider-range {
  background-color: #ff0a00;
}

#slider-1 .ui-slider-handle {
  background-color: #000000;
  border-radius: 50%;
  border: 0;
}

#disagree {
  font-weight: bold;
  width: 100px;
  z-index: 1000;
}

#agree {
  font-weight: bold;
  width: 100px;
  z-index: 1000;
}

JavaScript Functionality:

$(function() {
  $("#slider-1").slider({
    orientation: "horizontal",
    range: "min",
    value: 65,
    create: function() {
      $("#disagree").position({
        my: "right top",
        at: "left top+2",
        of: "#slider-1 .ui-slider-handle"
      });
      $("#agree").position({
        my: "left top",
        at: "left+25 top+2",
        of: "#slider-1 .ui-slider-handle"
      });
    },
    slide: function(e, ui) {
      $("#response1").html(ui.value + "%");
      $("#disagree").position({
        my: "right top",
        at: "left top+2",
        of: "#slider-1 .ui-slider-handle"
      });
      $("#agree").position({
        my: "left top",
        at: "left+25 top+2",
        of: "#slider-1 .ui-slider-handle"
      });
    }
  });
});

For more advanced features and customization options, refer to the official jQuery UI Slider Demos and API documentation available at: http://jqueryui.com/slider/.

The jQuery UI Slider component offers a wide range of functionalities and can be easily styled using CSS to suit your design preferences.

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

Contrast in spacing: comparing display block versus inline-block

Today, I stumbled upon something quite intriguing that has left me puzzled. Consider the following HTML: <div class="a"><div class="b"></div></div> And CSS: .a { background: blue; } .b { display:inline-block; height ...

I'm experiencing an issue where the links in my dropdown button are not showing when I hover over it. What could

I have been attempting to include a dropdown button that reveals several links when the mouse hovers over it. Despite successfully implementing the CSS for this feature, I am encountering an issue where the links are not displayed beneath the button. Afte ...

The use of scaffolding and grid structures within the Twitter Bootstrap framework

I'm currently utilizing the bootstrap scaffolding/grid system in the following manner: <div class="row-fluid"> <div id="insta-shop-filter" class="span2 visible-desktop"> </div> <div id="insta-shop-grid" class="span1 ...

Determine the height of a DIV element and its contents using JQuery

In this div, there are various elements present: <div class="menuItem designMenu" id="dMenu"> <ul class="menuList menu"> <li class="menuHeader">Design</li> <li class="projectHeader">Mother</li> <li clas ...

Sending simple form information through AJAX to a PHP web service

Attempting to send form data via jQuery and Ajax to a PHP web service (php file) for echoing the results. This is my index.html file <html> <head> <title>PHP web service &amp; AJAX</title> <link rel="stylesheet" type="text/ ...

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...

jquery fancybox thumbs - no thumbs - no slide presentation

I am having trouble getting the fancybox thumbs to function correctly. Despite importing all the necessary js and css files, only the clicked picture is displayed (without any thumbs or slideshow). I want every image on the same page to load into the fanc ...

Is it appropriate to use localStorage in the createSlice "reducers" parameter of React Redux Toolkit?

I'm working on implementing a basic favorites list feature. Currently, there is no backend functionality in place so this will be stored in the localStorage. It might potentially switch to an API call in the future. Would it be considered acceptable ...

The functionality of the Ajax alert success message has experienced a failure

Issue with alert message not working in code. Using Firefox - unsure if browser is the issue. Assistance needed as I am new to this. Snippet of my code: $("#enquiry").on("click",function(){ $.ajax({ url: "<?php echo ...

What is the method to extract div text using Python and Selenium?

Is there a way to extract the text "950" from a div that does not have an ID or Class using Python Selenium? <div class="player-hover-box" style="display: none;"> <div class="ps-price-hover"> <div> ...

Bootstrap relies on jQuery for its JavaScript functionality, so jQuery must be loaded before using Bootstrap's JavaScript

I encountered an issue while trying to load the Bootstrap library, consistently receiving this error message: Uncaught Error: Bootstrap's JavaScript requires jQuery Even though I have ensured that jQuery is loaded before attaching the Bootstrap li ...

A fixed header list using CSS with a single scroll bar

I am looking to create a scrollable list with a fixed header, where the scroll bar extends the full height of the parent but only scrolls through the nav items (keeping the logo in place). My current setup involves: <div className="home-page-nav"> ...

Display item upon hovering and for an extended period upon clicking using jQuery

I am looking to create a functionality where hovering over an area displays item 2 for a certain duration, which is currently working fine with the existing code. However, I also want it to remain visible for a longer period if clicked, but this does not ...

Executing a single query in PHP using multiple WHILE loops

Recently, I've been working on a PHP page that interacts with an Oracle Database through SQL queries. SELECT * FROM TABLE1; My challenge now is to run five WHILE statements based on the value of the recordset. Ideally, it would look something like t ...

What are the options for transferring information between HTMX and Flask using JSON or another format aside from HTML?

So I am currently working on an app using Flask and HTMX. While I understand that htmx requires data in HTML format to swap with a specific target element, I am wondering if there is a way to update the current page using different formats such as dictiona ...

JavaScript Method for Retrieving Form Element Values

I am currently working on retrieving the value of an input element in a popup window that is launched from a parent page. Here is my code, but I am facing difficulties in obtaining the pc value from the input field. <html> <head> <? $pid= ...

form field with the ability to select multiple files

From my understanding, traditional html or javascript do not have the capability to upload multiple files (images) in a singular field. Please correct me if I am mistaken. Is there a way for this to be achieved with html5 or any other method aside from us ...

Error: The validation of a JSON request failed as schema.validate is not a recognized function

As a beginner, I am currently immersed in a node.js API authentication tutorial. Everything was going smoothly until I had to refactor my code into separate files. Now, every time I send a JSON request via Postman, I keep encountering the error message "Ty ...

Difficulty with aligning textfield controls to the right

I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary. So far, I attempted to align the text to the right by using this c ...

Despite providing the correct token with Bearer, Vue 3 is still experiencing authorization issues

I am working on a project that involves Vue 3 with a Node Express back-end server and Firebase integration. On the backend server, I have implemented the following middleware: const getAuthToken = (req, _, next) => { if ( req.headers.authori ...