[feature] add range value counts

Author: zombieFox

src/css/form.css

@@ -1241,6 +1241,25 @@ input[type="range"]:disabled::-moz-range-progress{
 cursor: default;
 }
 
+.form-group-text-small,
+.form-group-text-medium,
+.form-group-text-large{
+padding-left:0.5em;
+padding-right:0.5em;
+}
+
+.form-group-text-small{
+min-width:3em;
+}
+
+.form-group-text-medium{
+min-width:6em;
+}
+
+.form-group-text-large{
+min-width:9em;
+}
+
 .form-group{
 margin:001em0;
 display: inline-flex;
@@ -1274,7 +1293,8 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group>input[type="search"],
 .form-group>input[type="tel"],
 .form-group>input[type="text"],
-.form-group>input[type="color"]{
+.form-group>input[type="color"],
+.form-group>input[type="range"]{
 margin:0;
 border-radius:0;
 height: inherit;
@@ -1302,7 +1322,8 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group>input[type="search"]:focus,
 .form-group>input[type="tel"]:focus,
 .form-group>input[type="text"]:focus,
-.form-group>input[type="color"]:focus{
+.form-group>input[type="color"]:focus,
+.form-group>input[type="range"]:focus{
 z-index:2;
 }
 
@@ -1315,7 +1336,8 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group>input[type="search"]:hover,
 .form-group>input[type="tel"]:hover,
 .form-group>input[type="text"]:hover,
-.form-group>input[type="color"]:hover{
+.form-group>input[type="color"]:hover,
+.form-group>input[type="range"]:hover{
 z-index:3;
 }
 
@@ -1329,7 +1351,8 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group>input[type="search"]:first-child,
 .form-group>input[type="tel"]:first-child,
 .form-group>input[type="text"]:first-child,
-.form-group>input[type="color"]:first-child{
+.form-group>input[type="color"]:first-child,
+.form-group>input[type="range"]:first-child{
 border-radius:var(--theme-radius) 00var(--theme-radius);
 }
 
@@ -1343,7 +1366,8 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group>input[type="search"]:last-child,
 .form-group>input[type="tel"]:last-child,
 .form-group>input[type="text"]:last-child,
-.form-group>input[type="color"]:last-child{
+.form-group>input[type="color"]:last-child,
+.form-group>input[type="range"]:last-child{
 border-radius:0var(--theme-radius) var(--theme-radius) 0;
 }
 
@@ -1370,6 +1394,36 @@ input[type="range"]:disabled::-moz-range-progress{
 border-radius:0var(--theme-radius) var(--theme-radius) 0;
 }
 
+.form-group .form-group-radius-left.form-group-text,
+.form-group .form-group-radius-left.button,
+.form-group>select.form-group-radius-left,
+.form-group>input.form-group-radius-left[type="email"],
+.form-group>input.form-group-radius-left[type="number"],
+.form-group>input.form-group-radius-left[type="password"],
+.form-group>input.form-group-radius-left[type="search"],
+.form-group>input.form-group-radius-left[type="tel"],
+.form-group>input.form-group-radius-left[type="text"],
+.form-group>input.form-group-radius-left[type="color"],
+.form-group>input.form-group-radius-left[type="range"]{
+border-top-left-radius:var(--theme-radius);
+border-bottom-left-radius:var(--theme-radius);
+}
+
+.form-group .form-group-radius-right.form-group-text,
+.form-group .form-group-radius-right.button,
+.form-group>select.form-group-radius-right,
+.form-group>input.form-group-radius-right[type="email"],
+.form-group>input.form-group-radius-right[type="number"],
+.form-group>input.form-group-radius-right[type="password"],
+.form-group>input.form-group-radius-right[type="search"],
+.form-group>input.form-group-radius-right[type="tel"],
+.form-group>input.form-group-radius-right[type="text"],
+.form-group>input.form-group-radius-right[type="color"],
+.form-group>input.form-group-radius-right[type="range"]{
+border-top-right-radius:var(--theme-radius);
+border-bottom-right-radius:var(--theme-radius);
+}
+
 .form-dropdown{
 position: relative;
 }