`Moving smoothly with a slider and then reversing direction`

Question

`Moving smoothly with a slider and then reversing direction`

I have implemented a range slider to control the value in an input field. The values can vary greatly, so I needed finer control for lower numbers that gradually expands for larger numbers.

To address this issue, I utilized an easing equation based on the slider value rather than time. This successfully sets the text in the input field. However, my current challenge lies in reversing this process. I want users to be able to type into the input field and have the slider move accordingly based on the easing equation. Unfortunately, I am unsure of how to reverse and convert the function for this purpose.

You can view what I have done so far on CodePen. Any assistance or suggestions would be greatly appreciated.

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  var min_amount = 10;
  var max_amount = 2000;
  var ease = function(t, b, c, d) {
    t /= d;
    return c*t*t + b;
  }

  $scope.transaction = {
    slider: 0,
    amount: 1
  }

 $scope.sliderUpdate = function() {
  var quint = ease($scope.transaction.slider, min_amount, max_amount - min_amount, 100); console.log(quint);
   $scope.transaction.amount = quint;
 }

});

javascript angularjs ionic-framework

Answer 1

Answer №1

To achieve this, you can utilize the function provided below.

  var customFunction = function(x, b, c, d) {
    return d * Math.sqrt((x - b)/ c);
  }

where x represents the ease value.

Here is a functional example:

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  var min_amount = 10;
  var max_amount = 2000;
  var ease = function(t, b, c, d) {
    t /= d;
    return c * t * t + b;
  }

  var customFunction = function(x, b, c, d) {
    return d * Math.sqrt((x - b) / c)
  }

  $scope.transaction = {
    slider: 0,
    amount: 1
  }

  $scope.transaction.reverseamount = 0;
  $scope.sliderUpdate = function() {
    var quint = ease($scope.transaction.slider, min_amount, max_amount - min_amount, 100);
    console.log(quint);
    $scope.transaction.amount = quint;

    $scope.transaction.reverseamount = customFunction(quint, min_amount, max_amount - min_amount, 100);
  }

  $scope.transaction.reverseamount2 = customFunction(10, min_amount, max_amount - min_amount, 100);
  $scope.transaction.valueChange = function(val) {
    if (!isNaN(val) && val > 9 && val < 2001) {
      $scope.transaction.reverseamount2 = customFunction(val, min_amount, max_amount - min_amount, 100);
      $scope.errormsg = "";
    } else {
      $scope.errormsg = "invalid value";
    }
  }

  $scope.sliderUpdate2 = function(value) {
    $scope.transaction.inputValue = ease(value, min_amount, max_amount - min_amount, 100);
  }

});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.errorColor {
  color: red;
}

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic Pull to Refresh</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-controller="MyCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Blank Starter</h1>
  </ion-header-bar>

  <ion-content>

    <input type="text" value="1" ng-model="transaction.amount" />

    <input type="range" min="0" max="100" step="0.01" value="0" id="input-topUp-range" ng-model="transaction.slider" ng-change="sliderUpdate();" />

    <br/>{{transaction.reverseamount}}
    <br/>
    <input type="range" min="0" max="100" step="0.01" value="0" id="input-topUp-range2" ng-model="transaction.reverseamount" />

    <hr/>Number(between 10 to 2000):
    <input ng-model="transaction.inputValue" ng-keyup="transaction.valueChange(transaction.inputValue)" />
    <br/>
    <input type="range" min="0" max="100" step="0.01" value="0" id="input-topUp-range3" ng-model="transaction.reverseamount2" ng-change="sliderUpdate2(transaction.reverseamount2);" />
    <span class="errorColor">{{errormsg}}</span>
  </ion-content>

</body>

</html>

Answer 2

To achieve this, you can utilize the function provided below.

  var customFunction = function(x, b, c, d) {
    return d * Math.sqrt((x - b)/ c);
  }

where x represents the ease value.

Here is a functional example:

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  var min_amount = 10;
  var max_amount = 2000;
  var ease = function(t, b, c, d) {
    t /= d;
    return c * t * t + b;
  }

  var customFunction = function(x, b, c, d) {
    return d * Math.sqrt((x - b) / c)
  }

  $scope.transaction = {
    slider: 0,
    amount: 1
  }

  $scope.transaction.reverseamount = 0;
  $scope.sliderUpdate = function() {
    var quint = ease($scope.transaction.slider, min_amount, max_amount - min_amount, 100);
    console.log(quint);
    $scope.transaction.amount = quint;

    $scope.transaction.reverseamount = customFunction(quint, min_amount, max_amount - min_amount, 100);
  }

  $scope.transaction.reverseamount2 = customFunction(10, min_amount, max_amount - min_amount, 100);
  $scope.transaction.valueChange = function(val) {
    if (!isNaN(val) && val > 9 && val < 2001) {
      $scope.transaction.reverseamount2 = customFunction(val, min_amount, max_amount - min_amount, 100);
      $scope.errormsg = "";
    } else {
      $scope.errormsg = "invalid value";
    }
  }

  $scope.sliderUpdate2 = function(value) {
    $scope.transaction.inputValue = ease(value, min_amount, max_amount - min_amount, 100);
  }

});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.errorColor {
  color: red;
}

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic Pull to Refresh</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-controller="MyCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Blank Starter</h1>
  </ion-header-bar>

  <ion-content>

    <input type="text" value="1" ng-model="transaction.amount" />

    <input type="range" min="0" max="100" step="0.01" value="0" id="input-topUp-range" ng-model="transaction.slider" ng-change="sliderUpdate();" />

    <br/>{{transaction.reverseamount}}
    <br/>
    <input type="range" min="0" max="100" step="0.01" value="0" id="input-topUp-range2" ng-model="transaction.reverseamount" />

    <hr/>Number(between 10 to 2000):
    <input ng-model="transaction.inputValue" ng-keyup="transaction.valueChange(transaction.inputValue)" />
    <br/>
    <input type="range" min="0" max="100" step="0.01" value="0" id="input-topUp-range3" ng-model="transaction.reverseamount2" ng-change="sliderUpdate2(transaction.reverseamount2);" />
    <span class="errorColor">{{errormsg}}</span>
  </ion-content>

</body>

</html>

`Moving smoothly with a slider and then reversing direction`

Answer №1

Similar questions

Encountering a Uncaught TypeError when attempting to split an undefined property, but issue is limited to certain pages

Real-time updates using Express.js and Redis

What is the best way to transfer a base64 image string obtained from pouchdb to a different api as a file?

Could you please provide me with the option to send a list of the

Mirror the input text to another input within a for loop

Angular.js guarantees fetching data with $http.get

Exclude the use of ':any' in React component

Smooth Div Scroll experiencing display issues

Unable to redirect to a sub state and display the named view using UI Router

Preventing ReactJS tooltips from exceeding the boundaries of the screen

"Troubleshooting the issue of nested jQuery Ajax requests failing to execute properly

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

Preventing scrolling in one div while focusing on another div

Despite importing jQuery, the variable '$' cannot be located

What is the best way to extract the information from the checkbox in a MUI datatable?

`Storing modified PDF containing interactive form elements using integrated Chrome viewer and transferring it to a remote server`

JavaScript - Employing the .every function with an array containing objects

Capturing screen captures while using Protractor on BrowserStack

Error encountered in react-test-renderer test due to TypeError: Attempting to access properties of an undefined variable, specifically trying to read the 'current

Looking to display a different HTML document in a div - any suggestions?