Giter VIP home page Giter VIP logo

Comments (2)

ay42 avatar ay42 commented on July 28, 2024 1

Hi @alexwhb,
There are more examples in the Previews. Let me know if this helps.

swiftui-sliders/Sources/Sliders/RangeSlider/RangeSlider.swift

Lines 81 to 181 in d5a7d85

private struct HorizontalRangeSlidersPreview: View {
@State var range1 = 0.1...0.9
@State var range2 = 0.1...0.9
@State var range3 = 0.1...0.9
@State var range4 = 0.1...0.9
@State var range5 = 0.1...0.9
@State var range6 = -2.0...4.0
var body: some View {
VStack {
RangeSlider(range: $range1)
RangeSlider(range: $range2, distance: 0.3 ... 1.0)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: Capsule().foregroundColor(.purple)
)
.background(Capsule().foregroundColor(Color.purple.opacity(0.25)))
.frame(height: 8),
lowerThumb: Circle().foregroundColor(.purple),
upperThumb: Circle().foregroundColor(.purple),
lowerThumbSize: CGSize(width: 32, height: 32),
upperThumbSize: CGSize(width: 32, height: 32),
options: .forceAdjacentValue
)
)
RangeSlider(range: $range3)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: LinearGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .pink]), startPoint: .leading, endPoint: .trailing)
)
.background(LinearGradient(gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .pink]), startPoint: .leading, endPoint: .trailing).opacity(0.25))
.frame(height: 32)
.cornerRadius(16),
lowerThumb: HalfCapsule().foregroundColor(.white).shadow(radius: 3),
upperThumb: HalfCapsule().rotation(Angle(degrees: 180)).foregroundColor(.white).shadow(radius: 3),
lowerThumbSize: CGSize(width: 32, height: 32),
upperThumbSize: CGSize(width: 32, height: 32)
)
)
RangeSlider(range: $range4)
.frame(height: 64)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: LinearGradient(gradient: Gradient(colors: [.purple, .blue, .purple]), startPoint: .leading, endPoint: .trailing),
mask: Rectangle()
)
.mask(Ellipse())
.background(Ellipse().foregroundColor(Color.secondary.opacity(0.25)))
.overlay(Ellipse().strokeBorder(Color.white.opacity(0.5), lineWidth: 1))
.padding(.vertical, 8),
lowerThumbSize: CGSize(width: 16, height: 64),
upperThumbSize: CGSize(width: 16, height: 64)
)
)
RangeSlider(range: $range5)
.frame(height: 64)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: LinearGradient(gradient: Gradient(colors: [.yellow, .orange, .red]), startPoint: .leading, endPoint: .trailing),
mask: Rectangle()
)
.background(Color.secondary.opacity(0.25))
.cornerRadius(16),
lowerThumb: HalfCapsule().foregroundColor(.white).shadow(radius: 3),
upperThumb: HalfCapsule().rotation(Angle(degrees: 180)).foregroundColor(.white).shadow(radius: 3),
lowerThumbSize: CGSize(width: 32, height: 64),
upperThumbSize: CGSize(width: 32, height: 64)
)
)
RangeSlider(range: $range6, in: 1.0 ... 3.0)
.cornerRadius(8)
.frame(height: 128)
.rangeSliderStyle(
HorizontalRangeSliderStyle(
track:
HorizontalRangeTrack(
view: LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .leading, endPoint: .trailing),
mask: RoundedRectangle(cornerRadius: 10)
)
.background(Color.secondary.opacity(0.25)),
lowerThumbSize: CGSize(width: 8, height: 64),
upperThumbSize: CGSize(width: 8, height: 64)
)
)
}
.padding()
}
}

from swiftui-sliders.

alexwhb avatar alexwhb commented on July 28, 2024 1

@ay42 This is exactly what I was looking for! Thank you so much!

from swiftui-sliders.

Related Issues (20)

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.