extjs custom progress bar

I want to show users status on scale using extjs progress

i want to show user progress on the bar and a vertical line on the bar this indicates weather the user is before or after the value

see the below diagram for better understanding

------------开发者_JAVA技巧--------|-----------

Is it possible with extjs progress bar

Thanks

Below is my idea for ExtJS4.

JS:

Ext.create('Ext.ProgressBar', {
    renderTo: 'basic-slider',
    width: 214,
    value: 0.1
});
Ext.create('Ext.slider.Single', {
    cls: 'no-bg',
    renderTo: 'basic-slider',
    width: 214,
    minValue: 0,
    hideLabel: true,
    useTips: false,
    maxValue: 100,
    margin: '-19px 0 0 0', // render on progress bar
    value: 50
});

CSS:

.no-bg .x-slider-horz, .no-bg .x-slider-horz .x-slider-end, .no-bg .x-slider-horz .x-slider-inner {
    background-image: none !important; /* remove bg from slider */
}