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': '#333', 'draw': function(){ this.i.val(format(this.cv)); } });

`