Ослабление с помощью ползунка диапазона и обратно

У меня есть ползунок диапазона, который я использую для управления значением в поле ввода. Значения, которые мы используем, могут быть довольно высокими на максимальном конце, поэтому мы хотим более тонкого управления для меньших чисел, прежде чем быстрее появиться для больших чисел.Ослабление с помощью ползунка диапазона и обратно

Чтобы попытаться решить эту проблему, я использовал уравнение ослабления, а вместо этого использовал время на основе значения ползунка. Это отлично подходит для установки текста в поле ввода. Проблема, с которой я столкнулась, теперь возвращается в другую сторону. Я хочу, чтобы пользователь вводил в поле ввода и для ползунка, чтобы перейти туда, где он должен быть основан на уравнении ослабления. Для этого мне нужно как-то работать назад, но я действительно не знаю, как преобразовать функцию.

I have a codepen того, что у меня есть до сих пор, любая помощь или предложения были бы высоко оценены.

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; 
} 

});

источник

2015-05-22 mr_mg

Для этого вы можете использовать функцию ниже.

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

здесь x - это значение легкости.

Рабочий фрагмент.

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 reverseEase = 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 = reverseEase(quint, min_amount, max_amount - min_amount, 100); 
 
    } 
 

 
    $scope.transaction.reverseamount2 = reverseEase(10, min_amount, max_amount - min_amount, 100); 
 
    $scope.transaction.valueChange = function(val) { 
 
    if (!isNaN(val) && val > 9 && val < 2001) { 
 
     $scope.transaction.reverseamount2 = reverseEase(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>

источник

2015-05-22 15:08:46

Ослабление с помощью ползунка диапазона и обратно

ответ

Смежные вопросы