$

Circular Slider

|

A JQuery Plugin


var circularSlider = $('#slider').CircularSlider({ 
    min : 0, 
    max: 359, 
    value : 10,
    labelSuffix: "°",
    slide : function(value) {
        ui.next().css({'background' : 'linear-gradient(' + value + 
            'deg, white, cornsilk, white)'});
    }
}); 
                    

var halfCircularSlider = $('#slider').CircularSlider({ 
  min : 0, 
  max: 100, 
  value : 60,
  labelSuffix: "%",
  shape: "Half Circle",
  slide : function(value) {
    if (value < 50) {
      ui.next().css({'background' : 'rgba(250, 81, 81,' + ((100 - value) / 100) + ')'});
    } else {
      ui.next().css({'background' : 'rgba(87, 250, 87,' + (value / 100) + ')'});            
    }
  }
}); 
                    

var halfRightCircularSlider = $('#slider').CircularSlider({ 
  min : 0, 
  max: 100, 
  value : 40,
  labelSuffix: "kph",
  shape: "Half Circle Right",
  slide : function(value) {
    var alpha = value / 100;
    if (value <= 50) {
      ui.next().css({'background' : 'rgba(255, 235, 0,' + alpha + ')'});
    } else if (value <= 80) {
      ui.next().css({'background' : 'rgba(87, 250, 87,' + alpha + ')'});
    } else {
      ui.next().css({'background' : 'rgba(250, 81, 81,' + alpha + ')'});            
    }
  }
}); 
                    

var halfLeftCircularSlider = $('#slider').CircularSlider({ 
  min : 0, 
  max: 100, 
  value : 40,
  labelSuffix: "kph",
  shape: "Half Circle Left",
  slide : function(value) {
    var alpha = value / 100;
    if (value <= 50) {
      ui.next().css({'background' : 'rgba(255, 235, 0,' + alpha + ')'});
    } else if (value <= 80) {
      ui.next().css({'background' : 'rgba(87, 250, 87,' + alpha + ')'});
    } else {
      ui.next().css({'background' : 'rgba(250, 81, 81,' + alpha + ')'});            
    }
  }
}); 
                    

var halfBottomCircularSlider = $('#slider').CircularSlider({ 
    min : -50, 
    max: 50, 
    value : 20,
    labelPrefix: "▽",
    slide : function(value) {
    var alpha = Math.abs(value) / 100;   
    ui.next().css({'background' : 'rgba(7, 154, 252,' + alpha + ')'});
    }
}); 
                    

var imageSlider = $('#slider').CircularSlider({ 
    min : 0, 
    max: 359, 
    radius: 100, 
    innerCircleRatio: 0.7, 
    formLabel : function(value, prefix, suffix) {
        return '<img src="assets/images/baby' + parseInt(value / 23) + '.png"></img>';
    },
    slide : function(ui, value) {
        var colors = ['deeppink', 'seagreen', 'deepskyblue','coral', 'cadetblue', 'olive','chocolate', 'yellowgreen', 'cornflowerblue','slategrey', 'salmon', 'brown',darkgoldenrod', 'dimgrey'];
        var color = colors[parseInt(value / 23)];
        ui.find('.jcs').css({'border-color' : color });
        ui.find('.jcs-indicator').css({'background' : color });
    }   
}); 
                    
comments powered by Disqus