Having issues with AngularJS rzslider failing to dispatch updated slider value

Hello, I am currently using the rzmodule/rzslider in AngularJS. However, after changing the slider to a specific range, the ng-modal is not returning the updated value. It keeps returning the initial value of 10000 that was configured initially.

$scope.slider = {
      value: 10000,
      options: {
        floor: 0,
        ceil: 100000,
        step: 1000,
        minLimit: 1000,
        maxLimit: 100000
      }
    };

Here is the HTML code snippet:

<h1 class="selected-amt"><i class="fa fa-rupee"></i> {{slider.value}}</h1>
               <rzslider rz-slider-model="slider.value"
       rz-slider-options="slider.options"></rzslider>

The value displayed in {{slider.value}} updates correctly on the screen. However, when trying to access the updated value by clicking on a button and calling $scope.slider.value in the controller, it always returns the initial value of 10000 even though I have moved the slider to 20000.

In my controller, I have the following function to retrieve the updated value:

$scope.getvalue=function(){
console.log($scope.slider.value)//should return changed value but giving 10000 always
}

If anyone has any suggestions or solutions, please let me know. Thank you!

Answer №1

I tested out your code to verify the returned changed value and it seems to be functioning correctly. Feel free to review the code below.

var myApp = angular.module('myapp', ['rzModule']);

myApp.controller('TestController', TestController);

function TestController($scope) 
{

  $scope.slider = 
  {
      value: 10000,
      options: {
        floor: 0,
        ceil: 100000,
        step: 1000,
        minLimit: 1000,
        maxLimit: 100000
      }
  };
    
  $scope.getvalue=function()
  {
     console.log($scope.slider.value);//should return changed value but giving 10000 always
  }   
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.5.1/rzslider.css"/>
<div ng-app="myapp">
    <div ng-controller="TestController">
        <button ng-click= "getvalue()">Get slider value</button>
        <h1 class="selected-amt"><i class="fa fa-rupee"></i> {{slider.value}}</h1>
        <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
    </div>
</div>

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

Display different images based on user selection in vue.js

I am new to working with vue.js and I'm facing a challenge. My goal is to display images of NBA players based on the selected criteria using vue.js. For instance, if the Dunk contest champion is chosen, only images of Kobe and Jordan should be display ...

What is the process for displaying all indexes of a Mongo Collection using MongoDB Node native?

I am curious about how to retrieve all indexes from a specific collection in mongodb. I've tried using listIndexes, indexes, and indexInformation, but these methods only return empty values (arrays and objects). However, when I run db.getCollection(&a ...

Caution: Highlighting Non-ASCII Characters in Your Django Form

Looking to implement client-side Ajax validation for my Django form. The goal is to alert users in real-time if any non-ascii characters are detected as they type in a field. Originally considered using python to check for ascii characters in the form&apo ...

Is there a reliable method to verify the correctness of an HTML input?

I'm currently developing a quiz using <input type="text"> and <input type="number">. I've noticed that relying on numerous if / else statements in my code is proving to be highly inefficient due to the sheer amoun ...

What is the most efficient way to transmit JSON data from a browser to a REST endpoint via Node.js, specifically in gzip format?

Currently working with node.js and express, I have a home page that hits my REST endpoint (PUT) after loading to send some JSON data. The data is not gziped when sending to the endpoint, but I want it to be in gzip form once it reaches the endpoint. Is thi ...

Validating groups of fields using Angular fieldsets

AngularJS validation is working well with ng-required. However, I am interested in checking if all the form elements within my fieldset are valid. <form> <fieldset> <legend> Part one <img src="/co ...

Is there a way to split a string into words using arrays and functions?

The code I am currently working on is as follows: function look(str) { var stringArr = ['JAVA']; var arr = []; var novaString = '' for(i = 0; i < stringArr.length; i++) { arr = stringArr; } console.log(arr) return ...

What steps can I take to make sure JSON keys containing only digits are treated as Strings instead of Numbers?

Within a JSON String, I have IDs as keys, represented as Strings of numbers, while the values are actual Numbers (Float). The problem arises when parsing this information to obtain an object in Safari 10.1.2... var jsonData = "{\"53352\":0.6, ...

I'm looking for a way to implement an interactive auto slideshow in JavaScript that allows users to manually

Having spent a lot of time studying auto slideshows, I'm facing an issue where clicking on the bullet to show the next image results in the image disappearing suddenly. Initially, I thought the problem was with using addEventListener events, so I swi ...

Tips for removing duplicate objects from an array

I am utilizing the underscore.js plugin in my code I experimented with it on jsfiddle var basket=[{ "basketitems":[{"items":[]}], "itemdetails":[{ "amountPledged": "100", "bActivity": "Handloom Wo ...

Creating an installation package for an Electron application on Windows

Is it possible to create a Mac installer for an Electron app using a Windows PC? I have tried running npm make, but it only generates a Windows installer. ...

Limiting Node.js entry with Express

I have a node.js script running on a server. I want to prevent it from being accessed directly from a browser and restrict access to only certain domains/IP addresses. Is this achievable? ...

npm encounters difficulty in initiating the server

I encountered some errors after running npm start in my angular project directory. It was working fine yesterday, but today when I entered the npm start command in my cmd prompt, it started showing errors: This is how my package.json file looks like: { ...

Saving MongoDB query results to a file using the built-in Node.js driver

I have been attempting to save the output of a MongoDB query to a file using the native Node.js driver. Below is my code (which I found on this post: Writing files in Node.js): var query = require('./queries.js'); var fs = require('fs' ...

Is your URL getting cut off in jQuery?

How can I properly display a URL in an HTML table without it getting truncated? I'm attempting to show it within a table using jQuery, but it seems to be cutting off the URL. Here's a snippet of my code. Any suggestions on how to fix this? <! ...

The jQuery click event is failing on the second attempt

My PHP code dynamically generates a list, and I want to be able to delete rows by clicking on them. The code works fine the first time, but not the second time. HTML <li> <div class="pers-left-container"> <img src="<?php ech ...

What is the best way to access the child component in React?

const navArr = [ { path: "/introduction", title: "회사소개", subTitle: [{ title: "summary" }, { title: "vision" }], }, ] {navArr.map((obj) => { return ( <NavItem> ...

A method for saving information to cookies without encoding it

Is there a way to insert raw data into a cookie without AngularJS encoding it further? I have my own encoding logic and don't want AngularJS to apply additional encoding on the data. Edit: For example, I want to save the following string in a cookie: ...

JavaScript code that deletes text from a document - Script eradication

I am trying to display the message "Todays Beer Style is: "Beer Style". However, when I add the javascript code, the "Todays Beer Style is:" text disappears. I'm not sure why this is happening. Below is the HTML code for reference. HTML Code <!DO ...

Error: The `Field` component encountered a failed prop type validation due to an invalid prop `component` after upgrading to MUI version

Encountered an error when migrating to Material ui v4 Failed prop type: Invalid prop component supplied to Field. in Field (created by TextField) This error points to the redux form field component export const TextField = props => ( <Field ...