JSFiddle - React, Tailwind, and code Playground

by Lore ZZ

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div ng-app="App">
   <div ng-controller="AppCtrl">
       <!-- Bind our slide model -->
       <h3>{{model}}</h3>
       <div id="slider"></div>
   </div>    
</div>

JavaScript

angular.module('App', [])
      .controller('AppCtrl', function ($scope) {
          
          $scope.model = 0;
          
          $scope.initSlider = function () {
              $(function () {
                // wait till load event fires so all resources are available
                  $scope.$slider = $('#slider').slider({
                      slide: $scope.onSlide
                  });
              });

              $scope.onSlide = function (e, ui) {
                 $scope.model = ui.value;
                 $scope.$digest();
              };
          };
          
          $scope.initSlider();
    });