Git Product home page Git Product logo

customoriginslider's Introduction

CustomOriginSlider

CustomOriginSlider is an open-source SwiftUI package that provides a customizable origin slider for your iOS projects. This slider allows users to select values in a range, either negative or positive, from an origin point.

This package provides a variety of customization options such as thumb size, color, guide bar style, tracking bar color, and more, making it a flexible choice for your user interface needs.

Features

  • Set the minimum and maximum values for your slider.
  • Set the defaultValue value for set the center of your slider.
  • Customize the slider's thumb size, color, and shadow.
  • Style the guide bar with your choice of corner radius, color, and height.
  • Define the appearance of the tracking bar, including its color and height.

Requirements

  • iOS 14.0+
  • mac OS 11.0+

Installation

CustomOriginSlider is available through the Swift Package Manager.

To add CustomOriginSlider to your Xcode project:

  1. Select File > New > Package...
  2. Enter https://github.com/laszlotuss/CustomOriginSlider.git into the package repository URL text box.
  3. Follow the prompts to add the package to your project.

Usage

First, import the CustomOriginSlider package in the file where you want to use it:

import SwiftUI
import CustomOriginSlider
struct ContentView: View {
    @State private var sliderValue: Float = 0.0

    var body: some View {
        CustomOriginSlider(
            minValue: -100,
            maxValue: 100,
            sliderValue: $sliderValue
        )
    }
}

Example 1 In this example, the slider's value can vary from -100 to 100, starting from 0. The aims to look as native as possible when no customization is added.

To further customize the slider, you can specify other properties as per your needs. For example:

CustomOriginSlider(
    minValue: -50,
    maxValue: 50,
    defaultValue: 15,
    sliderValue: $value2,
    thumbSize: 24,
    thumbColor: .red,
    guideBarCornerRadius: 4,
    guideBarColor: .blue.opacity(0.2),
    guideBarHeight: 6,
    trackingBarColor: .blue,
    trackingBarHeight: 6,
    shadow: 2,
    shadowColor: .gray,
    backgroundColor: .clear
)

Example 2

The last example shows three slider with custom origin and the sliderValue of 25. Note if the defaultValue is not set, it's either will be 0 or the closes value inside your minValue to maxValue interval.

CustomOriginSlider(
	minValue: -30,
	maxValue: 75,
	defaultValue: 50,
	sliderValue: $value)
                
CustomOriginSlider(
	minValue: 0,
	maxValue: 100,
	sliderValue: $value)
                
CustomOriginSlider(
	minValue: 50,
	maxValue: 100,
	sliderValue: $value)

Example 3

Contribution

Contributions to the CustomOriginSlider project are welcome! Feel free to open a new issue or send a pull request, if you happen to find a bug, or would liek to add any new features.

License

CustomOriginSlider is available under the MIT license.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.