I have 3 integer values: a minimum, a maximum and a value between them. Now I want to show, inside a visualforce page, these 3 values on a bar with an indicator (e.g. a slider) on the specific value between the min and max. The bar should be totaly passive (i.e. the user can't move the slider but only see the value).

I don't know how to achieve that. Someone could give me an hint ? Below you find an image of what I want to achieve.

enter image description here

  • I think you can use one of the many slides java-script libraries available for this. – manjit5190 Jan 11 '17 at 8:53

In all "modern" browsers (see this chart), you can use an input of type "range" to specify a slider. You can also choose to disable it as you would any input element, which may be perfect for your case. Please note that the visual appearance will differ with each browser if you choose this route.


<apex:page docType="html-5.0">
        <input type="range" min="0" max="20" step="2" value="8" disabled="true" />


Chrome Showing a Slider

IE Edge:

IE Edge Showing a Slider

Of course, if you want to do a custom slider, pictured like in your question, you could use CSS, SVG, or a canvas to draw the element, or any of the various JavaScript chart libraries out there. I'm not going to work out a specific example, but it's definitely possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.