3

I have a little problem. I need to create circular slider, I didn't find any library which could help me, so seems like I need to write it on my own.
Here is my problem:
enter image description here

I want to create something like in picture above, but I can't find a way to load part of that gradiant for example:

enter image description here

Is it even possible to load part of image in js?

Charles
  • 50,943
  • 13
  • 104
  • 142
user1409508
  • 623
  • 1
  • 12
  • 38

4 Answers4

2

If you do not need to replace the image dynamically, I would recommend to prepare it in an image tool such as Photoshop.

if you have few images to replace, I would prepare them in Photoshop and change them via a javascript and css solution

Otherwise I do not know.

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Bertrand
  • 388
  • 4
  • 13
2

There is no way to load a part of an image in pure JavaScript. Instead you could use a sprite image and play with background position:

function getBgPos(pct) {
  if (pct < 12.5) { return '0 0'; }
  else if (pct < 25) { return '-100px 0'; }
  else if (pct < 37.5) { return '-200px 0'; }
  else if (pct < 50) { return '-300px 0'; }
  else if (pct < 62.5) { return '-400px 0'; }
  else if (pct < 75) { return '-500px 0'; }
  else if (pct < 87.5) { return '-600px 0'; }
  else if (pct < 100) { return '-700px 0'; }
  else { return '-800px 0'; }
};

i = 0;
setInterval(function () {
  jQuery('#loader').css('background-position', getBgPos(i));
  i += 12.5; if (i > 100) i = 0;
}, 500);
#loader {
  display: block;
  width: 100px;
  height: 100px;
  background: yellow url(https://i.stack.imgur.com/Xsf4k.png) no-repeat 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="loader" src="https://i.stack.imgur.com/ArcTX.png" />

1

Since you are going for backwards compatibility, I'm going to build off of Bertrand's suggestion . . . you could easily make a "sprite" image that contains all of the various "stage" of the slider (i.e., 20% done, 40% done, etc.) and reference each stage of it in a different CSS class.

That way, all of the stages would be loaded as one image on page load and you could update the class of the element that displays the slider with JavaScript, updating the progression of the slider.

talemyn
  • 7,822
  • 4
  • 31
  • 52
  • There will be horizontal slider which value will be shown on that circular slider. So it needs to be dynamically method (it's my school project) – user1409508 Mar 05 '13 at 20:31
  • Well, in theory, you could still do it . . . you would just have to have an state in the sprite file for each possible value of the slider. However, if the slider goes from 1 to 100 and you can move up and down in step of 1, that would make for a very large sprite. Big sprite files are not THAT uncommon, though. – talemyn Mar 05 '13 at 20:38
  • As far as changing it dynamically, that would actually be pretty simple (though, again, big). You'd make a style for each slider point and make the value of each point part of the corresponding class name. That way, you could just feed the slider value directly into the function that changes the class, to be included as part of the updated class name. – talemyn Mar 05 '13 at 20:41
0

I agree with the canvas option. Also - based on what you are trying to do I would recommend - http://anthonyterrien.com/knob/

I customized the dial itself with an image and you can set the color of the revealed part. It may not be your total solution - but ideally will point you in the right direction.

mikevoermans
  • 3,967
  • 22
  • 27