JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div ng-App="myApp">
    
    <div ng-controller="myController">
        <my-Directive params='params' positions='scroll'></my-Directive>
    </div>
    
</div>

JavaScript

angular.module("myApp", [])
.controller("myController", ['$scope',function($scope){
    
    $scope.params = {
        min: -30,
        max: 27.3435,
        avg: 0,
    };
    
    $scope.scroll = Object.create($scope.params);
    
}])
.directive('myDirective', ['$document', function($document) {
    
    
    
    function linker (scope, element, attr) {
        
        scope.$watch('params', function(){
            
            
            var startMin = ((scope.params.avg - scope.params.min) / (scope.params.max - scope.params.min) )* 1000
            
            $('#slider').slider({min: 1, max: 1000, values: [0, startMin, 1000],
                slide: function(event, ui) {
                    var index = $(ui.handle).siblings('a').andSelf().index(ui.handle);
                    var values = $(this).slider('values');
                    
                    
                    
                    
                    
                    if ((index == 0 || ui.value > values[index - 1]) &&
                        (index == values.length - 1 || ui.value < values[index + 1])) {
                        
                        var dimension = null;
                        
                        if (index == 0){
                            dimension = "min"    
                        } else if (index == 1) {
                            dimension = "avg"
                        } else if  (index == 2) {
                            dimension = "max"
                        }
                        
                        scope.positions[dimension] = scope.params.min + ((scope.params.max - scope.params.min)*(ui.value/1000));
                        console.log(scope.positions);
                    }
                    return (index == 0 || ui.value > values[index - 1]) &&
                        (index == values.length - 1 || ui.value < values[index + 1]);
                
                    
                
                }
            });
           ...