Canvas Support

how to change the Range of jQuery slider

7 replies·opened May 11, 2020
K
kksmithMay 11, 2020

RE: pie-skills.html
In this example you have Jquery slider bar showing percentage.
I like to change the units from % to Grams which is easy

  1. on one page I like to reduce the range showing results from 0 to 1.5 grams
  2. on another page I like to show range from 0 to 20 grams etc....
    could you please advise how to adjust value Range independently on each page?

Thanks
Kev

S
SemiColonWebSTAFFMay 11, 2020

Hello,

  1. Thanks for your Patience. Unfortunately, currently the Counter does not support Decimal Numbers but we are working on an Update to release this soon.

  2. This is already possible and you can use something like this:

<li data-percent="20">
&#x9;<span>Amount</span>
&#x9;<div class="progress">
&#x9;&#x9;<div class="progress-percent"><div class="counter counter-inherit counter-instant"><span data-from="0" data-to="20" data-refresh-interval="2" data-speed="700"></span> grams</div></div>
&#x9;</div>
</li>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

K
kksmithMay 13, 2020

Thanks, any idea when are you releasing this update as i need to use decimal figures. or you can give me guidelines so that I can play around myself.
Cheers

S
SemiColonWebSTAFFMay 13, 2020

Hello,

The Update will be available within 2 Days. However, this Update will come with a lot of changes to the Core Codes. So you consider checking: counter: function() and runCounter: function( counterElement,counterElementComma ) Function Blocks to make your custom changes.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

K
kksmithJun 16, 2020

I can change the scale to decimal but slider range pointer is not covering the full slider length. could you please show some example?
I like to setup Slider range between 0 to 2.0

S
SemiColonWebSTAFFJun 16, 2020

Hello,

With Canvas 6, you can consider using something like this:

<li data-percent="100">
&#x9;<span>Wordpress</span>
&#x9;<div class="progress">
&#x9;&#x9;<div class="progress-percent"><div class="counter counter-inherit counter-instant"><span data-from="1" data-to="20" data-refresh-interval="10" data-speed="1200" data-comma="true" data-sep="." data-places="1"></span></span>%</div></div>
&#x9;</div>
</li>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

K
kksmithJun 17, 2020

Thanks I had to add data-decimals="2" to get the decimal places working

<div class="progress-percent"><div class="counter counter-inherit counter-instant"><span data-from="1" data-to="20" data-refresh-interval="10" data-speed="1200" data-comma="true" data-sep="." data-places="1" data-decimals="2"></span></span>%</div></div>

S
SemiColonWebSTAFFJun 17, 2020

Hello,

Glad that your issues were resolved.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard