V-Slider
The V-Slider component is used to show the progress in the vertical direction.
Default Chart Image:
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F972575688-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRYq1HgffNfbnIMWPu1D5%252Fuploads%252FJ0PYToZAh2QL7rhj6sla%252FDefault%2520image.png%3Falt%3Dmedia%26token%3D336cddd8-a052-416e-bbcc-12ab54150afb&width=768&dpr=4&quality=100&sign=3bca3529&sv=1)
Properties of the V-slider:
Background: The user can enable the shadow, change the shadow color, and transparency of that shadow. Also, by changing the gradient color user can change the background color of the V-slider.
General: The user can change the height, width, top, and left values. If initial visibility is unchecked, then the chart won’t be visible at the first preview. The user can change the unit from Auto to Percent, also set the maximum and minimum limit. By default, the interval will be 1, if we change it to 2 then the increment happens in the multiples of 2. Chrome color is changed to change the color of the slider body. Also, we can alter the circle color, radius, and thickness.
Label: The user can change the font size, style, family, etc. of the Label.
General Properties:
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F972575688-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRYq1HgffNfbnIMWPu1D5%252Fuploads%252FfqHCgTIHgGKjlH0f829A%252FGeneral%2520properties.png%3Falt%3Dmedia%26token%3D6e89175f-4191-47f1-9697-e40a6e01f9ee&width=768&dpr=4&quality=100&sign=f56fa03f&sv=1)
Background Properties:
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F972575688-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRYq1HgffNfbnIMWPu1D5%252Fuploads%252F1VyoxnZU9CpvrEfQjvCZ%252FBackground%2520properties.png%3Falt%3Dmedia%26token%3Daf927e05-c2ba-483b-903b-0e5d3132f59e&width=768&dpr=4&quality=100&sign=21686073&sv=1)
Label Properties:
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F972575688-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRYq1HgffNfbnIMWPu1D5%252Fuploads%252FsZSyAOYLedCgRUAr6Xkn%252FLabel%2520property.png%3Falt%3Dmedia%26token%3D8d9e5f57-9c00-46d2-a8cd-0abc1ce451d0&width=768&dpr=4&quality=100&sign=fe73f30a&sv=1)
The modified chart after changing the properties:
![](https://docs.bdb.ai/~gitbook/image?url=https%3A%2F%2F972575688-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRYq1HgffNfbnIMWPu1D5%252Fuploads%252FJYeVVfqj3dLQLH2ZLJdc%252FModified%2520slider%2520after%2520changing%2520its%2520properties.png%3Falt%3Dmedia%26token%3D6611aa5e-9fb6-4419-a71a-841582c6d608&width=768&dpr=4&quality=100&sign=b7f98ebd&sv=1)
Last updated