chore: rename range->slider, add larger ring

Author: cztomsik

src/app/_components/Range.tsx renamed to src/app/_components/Slider.tsx

@@ -1,7 +1,7 @@
 // TODO: until this gets fixed the :focus does not really work for ranges in Safari (and macos webview)
 //       https://bugs.webkit.org/show_bug.cgi?id=234516
 
-export const Range = ({ label, onChange, ...props }) => {
+export const Slider = ({ label, onChange, ...props }) => {
   return (
     <div class="vstack gap-2 mb-2">
       <label class="flex justify-between items-center">
@@ -10,7 +10,7 @@ export const Range = ({ label, onChange, ...props }) => {
       </label>
       <input
         type="range"
-        class="w-full appearance-none h-1 rounded-full bg-neutral-4 focus:outline-none thumb:appearance-none thumb:size-2 thumb:-mt-0.75 thumb:bg-neutral-1 thumb:ring thumb:ring-neutral-10 thumb:rounded-full focus:thumb:ring-primary-9"
+        class="w-full appearance-none h-1 rounded-full bg-neutral-4 focus:outline-none thumb:appearance-none thumb:size-2 thumb:-mt-0.75 thumb:bg-neutral-1 thumb:ring-2 thumb:ring-neutral-10 thumb:rounded-full focus:thumb:ring-2 focus:thumb:ring-primary-9"
         onChange={e => onChange(+e.target!.value)}
         {...props}
       />

src/app/_components/index.tsx

@@ -13,7 +13,7 @@ export { Markdown } from "./Markdown"
 export { Modal } from "./Modal"
 export { ModelSelect } from "./ModelSelect"
 export { Page } from "./Page"
-export { Range } from "./Range"
+export { Slider } from "./Slider"
 export { Resizable } from "./Resizable"
 export { SearchField } from "./SearchField"
 export { Select } from "./Select"

src/app/playground/SamplingOptions.tsx

@@ -1,20 +1,20 @@
-import { FormGroup, Field, Range, Checkbox } from "../_components"
+import { FormGroup, Field, Slider, Checkbox } from "../_components"
 
 export const SamplingOptions = ({ value, onChange }) => {
   return (
     <FormGroup class="p-3" value={value} onChange={onChange}>
       <h3 class="mb-2 text-neutral-10 text-sm uppercase font-medium">Sampling options</h3>
 
       <div class="vstack gap-3">
-        <Field as={Range} name="temperature" label="Temperature" min={0} max={2} step={0.01} />
-        <Field as={Range} name="top_k" label="Top K" min={1} max={100} />
-        <Field as={Range} name="top_p" label="Top P" min={0} max={1} step={0.01} />
+        <Field as={Slider} name="temperature" label="Temperature" min={0} max={2} step={0.01} />
+        <Field as={Slider} name="top_k" label="Top K" min={1} max={100} />
+        <Field as={Slider} name="top_p" label="Top P" min={0} max={1} step={0.01} />
 
-        <Field as={Range} name="repeat_n_last" label="Repeat N last" min={0} max={1024} />
-        <Field as={Range} name="repeat_penalty" label="Repeat penalty" min={0} max={2} step={0.01} />
+        <Field as={Slider} name="repeat_n_last" label="Repeat N last" min={0} max={1024} />
+        <Field as={Slider} name="repeat_penalty" label="Repeat penalty" min={0} max={2} step={0.01} />
 
-        <Field as={Range} name="presence_penalty" label="Presence penalty" min={0} max={2} step={0.01} />
-        <Field as={Range} name="frequency_penalty" label="Frequency penalty" min={0} max={2} step={0.01} />
+        <Field as={Slider} name="presence_penalty" label="Presence penalty" min={0} max={2} step={0.01} />
+        <Field as={Slider} name="frequency_penalty" label="Frequency penalty" min={0} max={2} step={0.01} />
 
         <Field as={Checkbox} name="add_bos" label="Add BOS token" />
         <Field as={Checkbox} name="json" label="Sample JSON" />