LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Non-editable percentages
Editable Percentages
CSS
.root{
  font-family : Verdana, Geneva, sans-serif;
  display : flex;
  flex-direction : column;
  align-items : center;
}
.root > * {
  margin-bottom : 50px;
}
.my_picker
{
  width : 500px;
}
.color_slider
{
  display : flex;
  flex-direction : row;
/*   width : 500px; */
  width : 100%;
  height : 15px;
  border-radius : 15px;
  background-color : gray;
/*    background-clip:         padding-box; */
/*   box-shadow : 1px 1px rgba(0,0,0,.4); */
  overflow : hidden;
}

.color_input
{
  visibility : hidden;
  position : absolute;
}

.color_label
{
  position : relative;
  color : white;
  display : block;
  height : 100%;
  cursor : pointer;
  background-clip: padding-box;
}
.color_overlay{
  position : absolute;
  z-index : 1;
  left : 100%;
  width : 10px;
  height : 100%;
  border-radius : 0 50% 50% 0;
}
.color_handle{
  position : absolute;
  width : 11px;
  height : 11px;
/*   color : black; */
/*   top : 100%; */
  right : -10px;
  cursor : ew-resize;
  border : 2px solid white;
  border-radius : 50%;
/*   float : right; */
/*   background-color : white; */
  z-index : 1;
}

.color_controls
{
  padding : 10px 5px;
  width : 100%;
  display : grid;
  grid-template-columns : 1fr 1fr 4fr;
/*   justify-items : center; */
  align-items : center;
}

.color_precision
{
  display : flex;
  width : 100%;
  flex-direction : row;
  justify-self : start;
}
.color_precision > input
{
  flex : 1;
  align-self : baseline;
  margin : 0px 20px;
}
/* Clear styling for range slider */
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}
/**** Style the thumb ***/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top : -8px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
JS
Vue.component('colorPicker', {
  template : "#mcp",
  components : {
    'vueSlider': window['vue-slider-component']
  },
  props : [],
  data : function(){
    return {
      // The array of colors
      colors : [],
      precision : 0,
      slider_options : {
        width : 200,
        height : 6,
        tooltip : false,
        tooltipDir: 'bottom',
      },
      curr_color : "#000000",
      editable : false,
      // Minimum and maximum numver of colors
      max_num : 5,
      min_num : 0,
      // Minimum and maximum values for color ranges
      min_percent : 0,
      max_percent : 100
    }
  },
  methods : {
    addColor : function(){
      let color = this.curr_color;
      // console.log(color);
      // console.log(r,g,b);
      if(this.colors.length < this.max_num){
        if(!this.colors.length){
         // Add first color as 100%
         this.colors.push({value : color, percent : 100}) 
        }else{      
          // Take an equal percentage from each color
          let percents = [];
          let percent = 0,
              amount = this.colors.length + 1;
          this.colors.forEach((color)=>{
            let p = color.percent / amount;
            if(p >= this.min_percent){
              percent += p;
              color.percent -= p;
              percents.push(color.percent);
            }
          });
          this.colors.push({value : color, percent })
          percents.push(percent);
          console.log(percents);
        }
      }
    },
    // Removes all the colors
    clearColors(){
      this.colors.splice(0, this.colors.length);
    },
    removeColor(i){
      if(!this.colors.length){
        return;
      }else{
        let rand = Math.floor(Math.random() * this.colors.length);
        let color = this.colors.splice(rand, 1)[0];
        let p = color.percent / this.colors.length;
        this.colors.forEach(c=>{
            c.percent += p;
        })    
      }
    }
  }
});

let v = new Vue({
  el : ".root",
  data : {}
});
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv