diff --git a/docs/css/styles.1690020865143.css b/docs/css/styles.1690035191714.css similarity index 100% rename from docs/css/styles.1690020865143.css rename to docs/css/styles.1690035191714.css diff --git a/docs/index.html b/docs/index.html index 34c2ad2..d2d5f47 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,8 +19,8 @@ - - + + @@ -119,7 +119,7 @@

ES6/TypeScript

  • -
    Range Slider
    +
    React Round Slider
    @@ -163,7 +163,7 @@

    Knobs

    - +
    @@ -178,13 +178,13 @@

    Knobs

    -

    Slider Type

    +

    SVG

    -

    Direction & Orientation

    +

    Sleek Design with SVG

    -

    The library supports horizontal and vertical orientation. It also supports left to right and right to left directions for a horizontal slider, and top to bottom and bottom to top for vertical sliders.

    +

    Leverage the power of SVG (Scalable Vector Graphics) to achieve sharp, high-quality visuals that scale effortlessly across devices, from desktops to mobile.

    - Learn more + Learn more
    @@ -195,28 +195,32 @@

    Slider Type

  • -
    Range Slider
    +
    React Round Slider
    - 
    <tc-range-slider
-  type="vertical"
-  value1="30"
-  value2="70">
-</tc-range-slider>
-
-<tc-range-slider
-  rtl="true"
-  value="50"
-  generate-labels="true">
-</tc-range-slider>
    + 
    
+  <RoundSlider
+      pathStartAngle={ 0 }
+      pathEndAngle={ 180 }
+      pathRadius={ 150 }
+      pathThickness={ 15 }
+      pathBgColor={ '#efefef' }
+      pathInnerBgColor={ '#efefef' }
+      pathBorder={ 2 }
+      pathBorderColor={ '#28586c' }
+      textOffsetY={ 70 }
+      textFontSize={ 24 }
+      pointers={ pointers }
+  />
+
    - +
    @@ -240,13 +244,13 @@

    Data

    The slider range can be defined by a minimum and maximum numbers. Another option is to provide a list of individual (discrete) values. Both text and numeric data are supported.

    - Learn more + Learn more
    - +
    @@ -267,9 +271,9 @@

    Styles

    Styles, Design, Animation

    -

    The library has multiple options for customizing the appearance of the slider. Width, height, border radius, colors, hover and focus, and other properties can be customized using the slider attributes. Images and SVGs can be used as pointers. It has a standalone moving tooltip plugin.

    +

    The library has multiple options for customizing the appearance of the slider. Circle radius, start & end angles, border size, colors, hover and focus, and other properties can be customized using the slider attributes. Custom SVGs can be used as pointers, and there is an on-click animation.

    - Learn more + Learn more
    @@ -527,25 +531,25 @@

    Free

    The library is free to use in any personal or commercial project.

    - Read License + Read License
    - --> - + \ No newline at end of file diff --git a/docs/pages/circle-gradient.html b/docs/pages/circle-gradient.html index dc7da0d..4737961 100644 --- a/docs/pages/circle-gradient.html +++ b/docs/pages/circle-gradient.html @@ -16,8 +16,8 @@ - - + + @@ -254,6 +254,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/connection.html b/docs/pages/connection.html index 92761d6..a5e661a 100644 --- a/docs/pages/connection.html +++ b/docs/pages/connection.html @@ -16,8 +16,8 @@ - - + + @@ -243,6 +243,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/custom-pointer-shape.html b/docs/pages/custom-pointer-shape.html index f61868c..23a171e 100644 --- a/docs/pages/custom-pointer-shape.html +++ b/docs/pages/custom-pointer-shape.html @@ -16,8 +16,8 @@ - - + + @@ -219,6 +219,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/data-settings.html b/docs/pages/data-settings.html index e0bb894..c856118 100644 --- a/docs/pages/data-settings.html +++ b/docs/pages/data-settings.html @@ -16,8 +16,8 @@ - - + + @@ -242,6 +242,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/disabled-state.html b/docs/pages/disabled-state.html index 6001198..b375d47 100644 --- a/docs/pages/disabled-state.html +++ b/docs/pages/disabled-state.html @@ -16,8 +16,8 @@ - - + + @@ -229,6 +229,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/individual-pointer-settings.html b/docs/pages/individual-pointer-settings.html index 9ff48b6..0b90240 100644 --- a/docs/pages/individual-pointer-settings.html +++ b/docs/pages/individual-pointer-settings.html @@ -16,8 +16,8 @@ - - + + @@ -278,6 +278,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/path-settings.html b/docs/pages/path-settings.html index 92fd0c1..4775571 100644 --- a/docs/pages/path-settings.html +++ b/docs/pages/path-settings.html @@ -16,8 +16,8 @@ - - + + @@ -269,6 +269,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/pointer-and-connection-gradient.html b/docs/pages/pointer-and-connection-gradient.html index 41b0f5a..e52e486 100644 --- a/docs/pages/pointer-and-connection-gradient.html +++ b/docs/pages/pointer-and-connection-gradient.html @@ -16,8 +16,8 @@ - - + + @@ -238,6 +238,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/pointer-settings.html b/docs/pages/pointer-settings.html index d5b8ee3..f7e1341 100644 --- a/docs/pages/pointer-settings.html +++ b/docs/pages/pointer-settings.html @@ -16,8 +16,8 @@ - - + + @@ -268,6 +268,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/pointers-overlap.html b/docs/pages/pointers-overlap.html index 87c24a5..98a35be 100644 --- a/docs/pages/pointers-overlap.html +++ b/docs/pages/pointers-overlap.html @@ -16,8 +16,8 @@ - - + + @@ -210,6 +210,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/text-values.html b/docs/pages/text-values.html index 25ac722..8698acb 100644 --- a/docs/pages/text-values.html +++ b/docs/pages/text-values.html @@ -16,8 +16,8 @@ - - + + @@ -256,6 +256,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/ticks-settings.html b/docs/pages/ticks-settings.html index 66d4cf5..0e165c6 100644 --- a/docs/pages/ticks-settings.html +++ b/docs/pages/ticks-settings.html @@ -16,8 +16,8 @@ - - + + @@ -266,6 +266,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/ticks-values.html b/docs/pages/ticks-values.html index 8f942b8..22aa2f3 100644 --- a/docs/pages/ticks-values.html +++ b/docs/pages/ticks-values.html @@ -16,8 +16,8 @@ - - + + @@ -280,6 +280,6 @@ --> - + \ No newline at end of file diff --git a/docs/pages/values-list.html b/docs/pages/values-list.html index df010f9..bdce16e 100644 --- a/docs/pages/values-list.html +++ b/docs/pages/values-list.html @@ -16,8 +16,8 @@ - - + + @@ -225,6 +225,6 @@ --> - + \ No newline at end of file diff --git a/src/docs/data/special-pages/index.html b/src/docs/data/special-pages/index.html index d80e1fd..8b94038 100644 --- a/src/docs/data/special-pages/index.html +++ b/src/docs/data/special-pages/index.html @@ -93,7 +93,7 @@

    ES6/TypeScript

  • -
    Range Slider
    +
    React Round Slider
    @@ -137,7 +137,7 @@

    Knobs

    - +
    @@ -152,13 +152,13 @@

    Knobs

    -

    Slider Type

    +

    SVG

    -

    Direction & Orientation

    +

    Sleek Design with SVG

    -

    The library supports horizontal and vertical orientation. It also supports left to right and right to left directions for a horizontal slider, and top to bottom and bottom to top for vertical sliders.

    +

    Leverage the power of SVG (Scalable Vector Graphics) to achieve sharp, high-quality visuals that scale effortlessly across devices, from desktops to mobile.

    - Learn more + Learn more
    @@ -169,28 +169,32 @@

    Slider Type

  • -
    Range Slider
    +
    React Round Slider
    - 
    <tc-range-slider
-  type="vertical"
-  value1="30"
-  value2="70">
-</tc-range-slider>
-
-<tc-range-slider
-  rtl="true"
-  value="50"
-  generate-labels="true">
-</tc-range-slider>
    + 
    
+  <RoundSlider
+      pathStartAngle={ 0 }
+      pathEndAngle={ 180 }
+      pathRadius={ 150 }
+      pathThickness={ 15 }
+      pathBgColor={ '#efefef' }
+      pathInnerBgColor={ '#efefef' }
+      pathBorder={ 2 }
+      pathBorderColor={ '#28586c' }
+      textOffsetY={ 70 }
+      textFontSize={ 24 }
+      pointers={ pointers }
+  />
+
    - +
    @@ -214,13 +218,13 @@

    Data

    The slider range can be defined by a minimum and maximum numbers. Another option is to provide a list of individual (discrete) values. Both text and numeric data are supported.

    - Learn more + Learn more
    - +
    @@ -241,9 +245,9 @@

    Styles

    Styles, Design, Animation

    -

    The library has multiple options for customizing the appearance of the slider. Width, height, border radius, colors, hover and focus, and other properties can be customized using the slider attributes. Images and SVGs can be used as pointers. It has a standalone moving tooltip plugin.

    +

    The library has multiple options for customizing the appearance of the slider. Circle radius, start & end angles, border size, colors, hover and focus, and other properties can be customized using the slider attributes. Custom SVGs can be used as pointers, and there is an on-click animation.

    - Learn more + Learn more
    @@ -501,25 +505,25 @@

    Free

    The library is free to use in any personal or commercial project.

    - Read License + Read License
    -