> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/control/slider.md).

# Slider

╱🚧 under construction

[SwiftUI](/ios/swiftui.md) ⟩ [controls](/ios/swiftui/control.md) ⟩ Slider

{% hint style="warning" %}
:warning: 注意：<mark style="color:purple;">**`Slider`**</mark> <mark style="color:yellow;">範圍的變量</mark><mark style="color:red;">必須是</mark> [`BinaryFloatingPoint`](https://developer.apple.com/documentation/Swift/BinaryFloatingPoint):exclamation:
{% endhint %}

```swift
// ⭐️ 設定小數位數(Slider 常用)
//   小數點前的位數(含正負號) ↴
Text("x：\(x, specifier: "%3.0f")")
    .font(.system(.body, design: .monospaced))    // ⭐️ 使用等寬字體
```

{% tabs %}
{% tab title="🔴 主題" %}

* [Slider label position](/ios/swiftui/control/slider/label-position.md)
* [自製的](/ios/custom.md) <mark style="color:purple;">**`Slider`**</mark>：&#x20;
  * [SliderWithLabel](/ios/custom/control/sliderwithlabel.md)
    {% endtab %}

{% tab title="💾 程式" %}

1. 使用<mark style="color:yellow;">預設範圍</mark>：<mark style="color:blue;">`0...1`</mark>，適合<mark style="color:yellow;">連續</mark>範圍。
2. 指定<mark style="color:yellow;">範圍</mark>(<mark style="color:blue;">`in:`</mark>)與<mark style="color:yellow;">間距</mark>(<mark style="color:blue;">`step:`</mark>)，適合<mark style="color:yellow;">整數</mark>範圍。
3. 顯示<mark style="color:yellow;">最小值</mark>(<mark style="color:blue;">`minimumValueLabel:`</mark>)與<mark style="color:yellow;">最大值</mark>(<mark style="color:blue;">`maximumValueLabel:`</mark>)。
4. 指定<mark style="color:yellow;">事件</mark>(<mark style="color:blue;">`onEditingChanged:`</mark>)處理方式。

{% tabs %}
{% tab title="1" %}

```swift
// 注意：放在 view 的宣告部分
@State private var scale: CGFloat = 0.5
let monospace = Font.system(.body, design: .monospaced) // ⭐️ 等寬字體

// 注意：放在 view.body 部分
Slider(value: $scale)        // ⭐️ `in`: 預設範圍為 0...1 (可省略)
    .accentColor(.orange)    // ⭐️ 設定 slider 的顏色
    
// ⭐️ 設定小數位數(Slider 常用)
//   小數點前的位數(含正負號) ↴
Text("scale：\(scale, specifier: "%0.2f")")       // 兩位小數
    .font(.system(.body, design: .monospaced))    // ⭐️ 等寬字體
```

{% endtab %}

{% tab title="2" %}

```swift
// 注意：放在 view 的宣告部分
@State private var step: CGFloat = 0

// 注意：放在 view.body 部分
HStack {
    // Slider 的顯示數值
    Text("作圖步驟：\(step, specifier: "%.0f")")  // ⭐️ 沒有小數部分
        .font(monospace)                        // ⭐️ 等寬字體
        .padding(.trailing)
    
    // ⭐️ 適合整數範圍
    Slider(value: $step, in: 0...5, step: 1)
        .frame(maxWidth: 300)
}
```

{% endtab %}

{% tab title="3" %}

```swift
// 注意：放在 view 的宣告部分
@State private var age: CGFloat = 50

// 注意：放在 view.body 部分
// ⭐️ 顯示最大最小值
Slider(
    value: $age, in: 18...80, step : 1, 
    minimumValueLabel: Text("18"), // ╮ 這兩個 label 如果不是同型別，
    maximumValueLabel: Text("80")  // ╯ 似乎會產生錯誤❓
){ EmptyView() }                   // ⭐️ 不使用 `label`
```

{% endtab %}

{% tab title="4" %}

```swift
// 注意：放在 view 的宣告部分
@State private var speed: CGFloat = 50

// 注意：放在 view.body 部分
// ⭐️ slider with min/max label
Slider(value: $speed, in: 0...100, step : 5) { 
    Text("Speed")         // slider label
} minimumValueLabel: { 
    Text("0")             // min label
} maximumValueLabel: { 
    Text("100")           // max label
} onEditingChanged: { 
    // ...                // event handler
}
```

{% endtab %}
{% endtabs %}
{% endtab %}

{% tab title="👥 相關" %}

* [Text](/ios/swiftui/control/text.md)
* [自製的](/ios/custom.md) <mark style="color:purple;">**`Slider`**</mark>： [SliderWithLabel](/ios/custom/control/sliderwithlabel.md)
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Views and Controls](https://developer.apple.com/documentation/swiftui/views-and-controls) ⟩ [Slider](https://developer.apple.com/documentation/swiftui/slider)
  * [Font](https://developer.apple.com/documentation/swiftui/font)
    * [system(\_:design:weight:)](https://developer.apple.com/documentation/swiftui/font/system\(_:design:weight:\))：specifies style, design, and weight.
    * [system(size:weight:design:)](https://developer.apple.com/documentation/swiftui/font/system\(size:weight:design:\))：specifies a system font.
      {% endtab %}

{% tab title="📗 參考" %}

* [ ] Paul ⟩ [How to create a slider and read values from it](https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-a-slider-and-read-values-from-it) - number **format**.
* [ ] SwiftUI Recipes ⟩ [Custom Slider in SwiftUI](https://swiftuirecipes.com/blog/custom-slider-in-swiftui)
* [ ] [swiftobc](https://swiftobc.com/) ⟩ [SwiftUI Sliders with custom styles](https://swiftobc.com/repo/spacenation-swiftui-sliders-swift-slider)
  {% endtab %}

{% tab title="💈範例" %}

* [TestIdealSizeView](/ios/swiftui/view/layout/frame/.frame/testidealsizeview.md) - to control parent's offered size.
* [SlidersForSize](/ios/custom/control/slidersforsize.md) - control width/height.
  {% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="<https://youtu.be/d2bdBpKFoJ4>" %}
tundsdev ⟩ Slider in SwiftUI
{% endembed %}
{% endtab %}

{% tab title="🗣 討論" %}

* [ ] [How to create custom slider by using SwiftUI?](https://stackoverflow.com/questions/58286350/how-to-create-custom-slider-by-using-swiftui)
  {% endtab %}
  {% endtabs %}