JSFiddle - React, Tailwind, and code Playground

by darul75

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="ctrl"  style="width:300px;margin:20px;">


    <div style="margin-top:80px; height:300px;left:30px;margin-right:50px;">
     <input  ng-model="sliderDefaultValues" type="text" id="mySlider3" slider options="sliderOptions"/> 
    </div>
    
    
    <button type="button" ng-click = "reset()" class="btn">Reset</button>
</div>

CSS

/** 
* @license ng-slider - v2.2.6-patch-watch
* (c) 2013 Julien VALERY https://github.com/darul75/ng-slider
* License: MIT 
**/

.jslider{position:relative;top:.6em;cursor:pointer;display:block;width:100%;height:1em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.jslider.disabled{opacity:.5}.jslider table{border-collapse:collapse;border:0;width:100%}.jslider table td,.jslider table th{width:100%;border:0;padding:0;text-align:left;vertical-align:top}.jslider div.jslider-bg i,.jslider div.jslider-pointer{background:url(../img/jslider.png) no-repeat 0 0}.jslider div.jslider-bg{position:relative}.jslider div.jslider-bg i{position:absolute;top:0;height:5px}.jslider div.jslider-bg i.left{left:0;width:50%;background-position:0 0}.jslider div.jslider-bg i.right{left:50%;width:50%;background-position:right 0}.jslider div.jslider-bg i.range{position:absolute;top:0;left:20%;width:60%;height:5px;z-index:1;background-repeat:repeat-x;background-position:0 -40px}.jslider div.jslider-bg i.default{left:0;width:1px;z-index:1;background-color:#185f83}.jslider.jslider-single div.jslider-pointer-to,.jslider.jslider-single div.jslider-value-to,.jslider.jslider-single div.jslider-bg .v,.jslider.jslider-single .jslider-limitless .jslider-label{display:none}.jslider div.jslider-pointer{position:absolute;top:-4px;left:20%;z-index:2;width:15px;height:15px;background-position:2px -60px;margin-left:-8px;cursor:pointer;cursor:hand}.jslider div.jslider-pointer.jslider-pointer-to{left:80%}.jslider div.jslider-pointer.jslider-pointer-hover{background-position:-19px -60px}.jslider div.jslider-label small,.jslider div.jslider-value small{position:relative;top:-.4em}.jslider div.jslider-label{position:absolute;top:-18px;left:0;padding:0 2px;opacity:.4;color:#000;font-size:9px;line-height:12px;white-space:nowrap}.jslider div.jslider-label.jslider-label-to{left:auto;right:0}.jslider div.jslider-value{position:absolute;top:-19px;left:0;padding:1px 2px...

JavaScript

function ctrl($scope, $filter, $timeout) {


    
      function custSliderLabels(value) {
            console.log("customize timer");
      }  
    
        function updateGraphExtremes() {
            console.log("update graph timer");
      }    
    
    $scope.reset =function(){
        init();
    }
   
    var init = function(){
      $scope.sliderDefaultValues = '34;67';  
       $scope.sliderOptions = {
        from: 25,
        to: 70,
        step: 1,
        dimensionfrom: "  AGE",
        dimensionto: "  AGE",
        vertical: false,
        css: {
          pointer: {
            "background-color": "#615959"
          },
          range: {
            // "background-color": "black"
          }
        },
        threshold: 1,
        onstatechange: function(value) {
                 console.log("value on start-->",value);
           if(value ==''){
                    alert("value is empty");
           }
            $timeout(updateGraphExtremes, 200);
        }
      };
    }
    init();
}

var app = angular.module('myApp', ['ngSlider']).controller('ctrl', ctrl);
/** 
* @license ng-slider - v2.2.6-patch-watch
* (c) 2013 Julien VALERY https://github.com/darul75/ng-slider
* License: MIT 
**/
!function(a){"use strict";a.module("ngSlider",[]).directive("slider",["$compile","$templateCache","$timeout","$window","slider",function(b,c,d,e,f){return{restrict:"AE",require:"?ngModel",scope:{options:"=",ngDisabled:"="},priority:1,link:function(g,h,i,j){function k(){a.element(e).bind("resize",function(a){g.slider.onresize()})}if(j){if(!g.options)throw new Error('You must provide a value for "options" attribute.');a.isString(g.options)&&(g.options=a.toJson(g.options)),g.mainSliderClass="jslider",g.mainSliderClass+=g.options.skin?" jslider_"+g.options.skin:" ",g.mainSliderClass+=g.options.vertical?" vertical ":"",g.mainSliderClass+=g.options.css?" sliderCSS":"",h.after(b(c.get("ng-slider/slider-bar.tmpl.html"))(g,function(a,b){b.tmplElt=a}));var...