Problem when resize viewport, width & formatting value

[miraahmad]

I want to set the input value as timer & I managed to achieve that by using 'format'

`$('#knob1').knob({

'min': 0,
'max': 60,
'step': 1, 
// 'width': 200,     
'thickness': 0.3,
'fgColor': '#06BABC',
'bgColor': '#333',	
'format' : function(v) {			
 	var sec = parseInt(v)*60;
	var min = Math.floor(sec / 60);
	sec -= min * 60;
	return min + ':' + (sec < 10 ? "0" + sec : sec);
}});`

I tried to make it responsive by setting the data-width to 80% but when I resized the viewport the value changed to normal number (eg: 25:00 -> 25)

if I add fixed width to the knob -> 'width': 200, the value displayed as what I want but it's not responsive & turned out like this

I also try using $(window).resize(function() {}); to get the width of the knob when resizing & dynamically change the value into 'width' but it's still not working.

Any advice?

https://jsfiddle.net/bf8aLtwj/

[samudiogo]

Hi! I updated your jsfiddle https://jsfiddle.net/bf8aLtwj/18/ with this approach:

• separate the main format function from optons:
  var format = function(v) { var sec = parseInt(v)*60; var min = Math.floor(sec / 60); sec -= min * 60; return min + ':' + (sec < 10 ? "0" + sec : sec); };

• then I call at draw event instead of format hook:
  `
  $('#knob1').knob({
  'min': 0,
  'max': 60,
  'width': '100%',
  'step': 1,
  'thickness': 0.3,
  'fgColor': '#06BABC',
  'bgColor': 'Disable Knob redraw on screen Resize #333',
  'draw': function(){
  this.i.val(format(this.cv));
  }
  });

`