0

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

Improve this question
1
  • I think you can use one of the many slides java-script libraries available for this.
    – manjit5190
    Commented Jan 11, 2017 at 8:53

1 Answer 1

Reset to default
1

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.

Example:

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

Chrome:

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.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .